Hoci dať na stránku animovaný sneh, či už od nás alebo od klienta, znie to ako dizajnérska prax staršia ako čokoľvek iné, pravdou je, že animácie ktorú pri tejto príležitosti predstavujeme, je more elegantných. Tiež nepotrebujete JavaScript, je to jednoduché CSS3.
Prvá vec je pozrieť sa na animácia.
Vyzerá celkom dobre, že? Aby sme to uviedli do praxe, stačí, ak vytvoríme tri obrázky s bielymi bodkami a animujeme ich pomocou vlastnosti @klíčové snímky CSS3 takto:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Pridávanie rôznych predpony pre rôzne prehliadače, potom pre naše telo ustanovuje:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Tiež pridanie potrebných predpôn. Celý postup s podrobným vysvetlením, s povolením Joshua Johnsona, nájdete na jeho blogu.
Viac informácií - Generátor prechodu CSS3, Generátor prechodu CSS3
Zdroj - Design Shack