%div.wrap
-144.times do
%div.c
View Compiled
$total: 144;
$time: 4;
$height: 400;
$percent: .69444%;
$dotSize: .9;
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: black;
overflow: hidden;
}
.wrap {
position: relative;
height: 100%;
}
.c {
position: relative;
height: $height+px;
width: $percent;
margin-top: -$height+px;
animation: drop $time+s infinite ease-in;
&:after {
content: "";
position: absolute;
width: $dotSize+vw;
height: $dotSize+vw;
border-radius: 50%;
left: 50%;
bottom: -($dotSize/2)+vw;
margin-left: -($dotSize/2)+vw;
}
}
@for $i from 1 through $total {
$hue: (300/$total) * $i;
.c:nth-child(#{$i}){
left: ($i - 1) * $percent;
background-image: linear-gradient( to bottom, black, hsla($hue, 100%, 50%, .8));
animation-delay: random($total) * ($time/$total) * -1s;
&:after {
background: hsla($hue, 100%, 50%, 1);
}
}
}
@keyframes drop {
80% {
opacity: 1;
}
100% {
transform: translate3d(0, 150vh, 0);
opacity: 0;
}
}
View Compiled
This Pen doesn't use any external CSS resources.