Deși pune zăpadă animată pe o pagină, fie de la noi sau de la un client, sună ca o practică de proiectare mai veche decât orice altceva, adevărul este că animación pe care îl prezentăm cu această ocazie este marea elegantă. De asemenea, nu aveți nevoie de JavaScript, este simplu CSS3.
Primul lucru este să aruncăm o privire animația.
Arată destul de bine, nu? Pentru ao pune în practică, trebuie doar să creăm trei imagini cu puncte albe și să le animăm folosind proprietatea @ cadrele cheie din CSS3 după cum urmează:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Adăugarea diferitelor prefixe pentru diferite browsere, stabilind apoi pentru corpul nostru:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Adăugând și prefixele necesare. Procedura completă cu explicații detaliate, prin amabilitatea lui Joshua Johnson, poate fi găsită pe blogul său.
Mai multe informatii - Generator de gradient CSS3, Generator de gradient CSS3
Sursă - Design Shack