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

Mejora el rendimiento de tu web
Te enseñamos cómo crear tu web con WordPress y cómo conseguir mucho tráfico en poco tiempo:
Crear un blog con WordPressPasa de 0 a 5.000 visitas en tu web

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