SCSS
$total: 200;
$width: 30;
$height: 40;
$time: 10;
html, body {
height: 100%;
}
@function posOrNeg(){
@return random() * 2 - 1;
}
body {
min-height: 100%;
overflow: hidden;
}
.wrap {
height: 100%;
background: #222;
perspective: 600px;
transform-style: preserve-3d;
}
.c {
width: $width+px;
height: $height+px;
background: blue;
position: absolute;
}
@for $i from 1 through $total {
.c:nth-child(#{$i}){
left: ($i/2 - 1)+vw;
top: 50%;
margin-top: -$height/2+px;
animation: anim#{$i} $time+s infinite alternate;
animation-delay: -($i * $time/$total)+s;
background: hsla($i * 1.5, 100%, 50%, 1);
}
@keyframes anim#{$i} {
30% {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(random(155)*posOrNeg()+vh, random(155)*posOrNeg()+vw, random(2000)*posOrNeg()+px);
opacity: 0;
}
70% {
transform: translate3d(0,0,0);
}
}
}
