%div.l1
- (0...40).each do
%div
%div.l2
- (0...40).each do
%div
%div.l3
- (0...40).each do
%div
View Compiled
$n: 40
$w: 30px
$l: #436, #936, #c36
body
background: #036
div[class]
width: $n * $w
height: 90%
position: absolute
left: 50%
transform: translateX(-50%)
div > div
border-radius: 0 0 $w / 2 $w / 2
width: $w
min-height: $w
float: left
transform: translateY(-100%)
animation: drop 2s forwards ease-out
@keyframes drop
from
transform: translateY(-100%)
to
transform: translateY(0)
@each $c in $l
$i: index($l, $c)
.l#{$i} div
background: $c
@for $j from 1 through $n
&:nth-child(#{$j})
height: random(100 - 20 * ($i - 1)) * 1%
animation-delay: random(60 + 20 * ($i - 1)) * .01s
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.