- 100.times do
.particle
View Compiled
html, body { height: 100%; }
body {
background: #262546;
overflow: hidden;
}
.particle {
position: absolute;
animation: shoot 3s ease-out infinite;
animation-name: shoot, fade;
border-radius: 50%;
@for $i from 0 to 400 {
$t: (1 + .01 * random(100)) * 1s;
&:nth-child(#{ $i + 1 }) {
$d: random(100) + px;
width: $d; height: $d;
transform: translate(random(100)*1vw,
random(100)*1vh);
background: hsl(random(360deg), 80%, 80%);
animation-duration: $t;
animation-delay: -.01 * random(100) * $t;
}
}
}
@keyframes shoot {
0% { transform: translate(50vw, 50vh); }
}
@keyframes fade {
to { opacity: 0 }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.