-(1..100).each do |i|
.b
View Compiled
$b:100;
html {
height: 100%;
width: 100%;
background: linear-gradient(rgba(gray,0.8),white);
}
.b{
border-radius:50%;
float: left;
margin-top: -50px;
position: absolute;
@for $i from 0 to $b {
$rw:random(10)+1;
$ra:random(20)+10;
$rd:random(10)+1;
$rc:random(10)+90;
&:nth-child(#{$i + 1}){
margin-left: (percentage(1)/$b)*$i;
width: $rw+px;
height: $rw+px;
background:hsla(0,0%,$rc,.8);
box-shadow: 0 0 15px 10px hsla(0,0%,$rc,.5);
animation: fall $ra+s $rd+s infinite;
}
}
}
@keyframes fall { 0% { transform: scale(0) }
2% { transform: scale(1); top: -50px; }
100% { transform: scale(0); top: 100%; } }
View Compiled
This Pen doesn't use any external CSS resources.