Iako stavite animirani snijeg na stranicubilo od nas ili od klijenta, zvuči kao dizajnerska praksa starija od svega ostalog, istina je da animación 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, trebamo stvoriti samo tri slike s bijelim točkama i animirati ih pomoću svojstva @ključni okviri 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 preglednike, 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đer 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 - Dizajn Šank