Aunque poner nieve animada en una página, sea de nosotros o el de algún cliente, suena a práctica de diseño más añeja que otra cosa, lo cierto es que la animación que presentamos en esta ocasión es la mar de elegante. Además no necesita JavaScript, es simple CSS3.
Lo primero es echar un vistazo a la animación.
Luce bastante bien, ¿cierto? Para ponerla en práctica tan sólo necesitamos crear tres imágenes con puntos blancos y animarlas haciendo uso de la propiedad @keyframes de CSS3 de la siguiente manera:
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Agregando los diferentes prefijos para los distintos navegadores, estableciendo después para nuestro cuerpo:
body {
background-color: #6b92b9;
background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
animation: snow 20s linear infinite;
}
Agregando también los prefijos necesarios. El procedimiento completo con explicaciones detalladas, cortesía de Joshua Johnson, puede encontrarse en su blog.
Más información – CSS3 Gradient Generator, generador de gradientes CSS3
Fuente – Design Shack