STEINNI
161 lines
4.6 KiB
HTML
161 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="https://unpkg.com/css-doodle@0.37.3/css-doodle.min.js"></script>
|
|
<title>Project 42</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #000;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.glowing {
|
|
position: relative;
|
|
min-width: 700px;
|
|
height: 550px;
|
|
margin: -150px;
|
|
transform-origin: right;
|
|
animation: colorChange 5s linear infinite;
|
|
}
|
|
|
|
.glowing:nth-child(even) {
|
|
transform-origin: left;
|
|
}
|
|
|
|
@keyframes colorChange {
|
|
0% {
|
|
filter: hue-rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
filter: hue-rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.glowing span {
|
|
position: absolute;
|
|
top: calc(80px * var(--i));
|
|
left: calc(80px * var(--i));
|
|
bottom: calc(80px * var(--i));
|
|
right: calc(80px * var(--i));
|
|
filter: blur(2px);
|
|
}
|
|
|
|
.glowing span::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -8px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #f00;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.glowing span:nth-child(3n + 1)::before {
|
|
background: rgba(134,255,0,1);
|
|
box-shadow: 0 0 20px rgba(134,255,0,1),
|
|
0 0 40px rgba(134,255,0,1),
|
|
0 0 60px rgba(134,255,0,1),
|
|
0 0 80px rgba(134,255,0,1),
|
|
0 0 0 8px rgba(134,255,0,.1);
|
|
}
|
|
|
|
.glowing span:nth-child(3n + 2)::before {
|
|
background: rgba(255,214,0,1);
|
|
box-shadow: 0 0 20px rgba(255,214,0,1),
|
|
0 0 40px rgba(255,214,0,1),
|
|
0 0 60px rgba(255,214,0,1),
|
|
0 0 80px rgba(255,214,0,1),
|
|
0 0 0 8px rgba(255,214,0,.1);
|
|
}
|
|
|
|
.glowing span:nth-child(3n + 3)::before {
|
|
background: rgba(0,226,255,1);
|
|
box-shadow: 0 0 20px rgba(0,226,255,1),
|
|
0 0 40px rgba(0,226,255,1),
|
|
0 0 60px rgba(0,226,255,1),
|
|
0 0 80px rgba(0,226,255,1),
|
|
0 0 0 8px rgba(0,226,255,.1);
|
|
}
|
|
|
|
.glowing span:nth-child(3n + 1) {
|
|
animation: rotatedots 15s alternate infinite;
|
|
}
|
|
|
|
.glowing span:nth-child(3n + 2) {
|
|
animation: rotatedots-reverse 5s alternate infinite;
|
|
}
|
|
|
|
.glowing span:nth-child(3n + 3) {
|
|
animation: rotatedots 11s alternate infinite;
|
|
}
|
|
|
|
.glowing {
|
|
animation: fadeaway 30s forwards;
|
|
}
|
|
|
|
|
|
@keyframes fadeaway {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes rotatedots {
|
|
0% { transform: rotate(180deg); }
|
|
50% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes rotatedots-reverse {
|
|
0% { transform: rotate(360deg); }
|
|
50% { transform: rotate(180deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
.deblur{
|
|
filter: blur(14px);
|
|
opacity: 0;
|
|
animation: deblur 5s ease-out forwards; /* runs once */
|
|
will-change: filter, opacity;
|
|
color: aliceblue;
|
|
position: absolute;
|
|
font-family: sans;
|
|
}
|
|
|
|
@keyframes deblur{
|
|
0% { filter: blur(14px); opacity: 0; font-size:20px }
|
|
100% { filter: blur(0); opacity: 1; font-size:60px }
|
|
}
|
|
|
|
/* optional accessibility */
|
|
@media (prefers-reduced-motion: reduce){
|
|
.deblur{ animation: none; filter: none; opacity: 1 }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="glowing" style="--j:1;">
|
|
<span style="--i:1;"></span>
|
|
<span style="--i:2;"></span>
|
|
<span style="--i:3;"></span>
|
|
</div>
|
|
|
|
<div class="glowing" style="--j:2;">
|
|
<span style="--i:1;"></span>
|
|
<span style="--i:2;"></span>
|
|
<span style="--i:3;"></span>
|
|
</div>
|
|
|
|
<h1 class="deblur">Project 42</h1>
|
|
</body>
|
|
</html> |