Yet another css3 snow demo. I noticed codepen has a custom random() function for sass. It's very fun to use for sure!
More info: http://blog.codepen.io/2013/08/26/random-function-in-sass/
Yet another css3 snow demo. I noticed codepen has a custom random() function for sass. It's very fun to use for sure!
More info: http://blog.codepen.io/2013/08/26/random-function-in-sass/
num_of_snow = 100 | |
- for (var i=0; i<num_of_snow; i++) | |
.snow(id="snow"+i) |
@import "compass"; | |
$num_of_snow: 100; | |
:root { | |
background-color: lighten(black,10%); | |
overflow:hidden; | |
} | |
@keyframes letitsnow { | |
0% { | |
top: 100%; | |
} | |
100% { | |
top: 0%; | |
} | |
} | |
.snow { | |
position: absolute; | |
border-radius: 50%; | |
background-color: white; | |
top: -9999px; | |
} | |
@for $i from 0 through $num_of_snow - 1 { | |
$size: random(5) + 2; // size 2-7 | |
$delay: random(500) * 0.05 + s; //0-25s delay | |
$speed: random(10) + 10 + s;//10-20s finish loop | |
#snow#{$i} { | |
animation: letitsnow $speed infinite linear $delay; | |
left: random(100) * 1%; | |
height: $size + px; | |
width: $size + px; | |
} | |
} |