Nieve animada con CSS

Nieve animada con CSS3

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

Packs de recursos a precios increíbles
Aprovecha la ocasión y hazte con alguno de estos packs con recursos de calidad para profesionales, ahora a precios muy rebajados:
Pack rebajado un 99%1000 fotos rebajadas un 64%

Categorías

Diseño Web
Etiquetas ,

Francisco J.

Técnico en Publicidad y Mercadotecnia, apasionado de Internet, la tecnología y entusiasta del software libre. Me gusta el diseño gráfico, en... Ver perfil ›

Escribe un comentario