Iako stavite animirani snijeg na stranicubilo od nas ili od klijenta, zvuči kao dizajnerska praksa starija od bilo čega drugog, istina je da animacija koje ovom prilikom predstavljamo je more elegantnog. Također vam nije potreban JavaScript, to je jednostavno CSS3.
Prva stvar je pogledati animacija.
Izgleda prilično dobro, zar ne? Da bismo to primijenili u praksi, potrebno je samo stvoriti tri slike s bijelim točkama i animirati ih pomoću svojstva @keyframes CSS3 kako slijedi:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Dodavanje različitih prefiksi za različite pregledače, zatim uspostavljanje za naše tijelo:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Takođe dodavanje potrebnih prefiksa. Cjelovit postupak s detaljnim objašnjenjima, ljubaznošću Joshua Johnsona, možete pronaći na njegovom blogu.
Više informacija - CSS3 Gradient Generator, CSS3 Gradient Generator
Izvor - Design Shack