Encara que posar neu animada en una pàgina, Sigui de nosaltres o el d'algun client, sona a pràctica de disseny més rància que una altra cosa, la veritat és que la animació que presentem en aquesta ocasió és la mar d'elegant. A més no necessita JavaScript, és simple CSS3.
El primer és fer una ullada a l'animació.
Llueix bastant bé, cert? Per posar-la en pràctica tan sols ens cal crear tres imatges amb punts blancs i animar-les fent ús de la propietat @keyframes de CSS3 de la següent manera:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Afegint els diferents prefixos per als diferents navegadors, Establint després per al nostre cos:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Afegint també els prefixos necessaris. El procediment complet amb explicacions detallades, cortesia de Joshua Johnson, pot trobar-se al seu bloc.
Més informació - CSS3 Gradient Generator, generador de gradients CSS3
font - Disseny de la barrica