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

¿Necesitas contratar un hosting para tu web?
En SiteGround tienes disponible una amplia oferta de hostings para todo tipo de bolsillos y necesidades. Encuentra el hosting que estás buscando al mejor precio, con las últimas tecnologías en velocidad y seguridad web y soporte en español 24h:
HostingHosting WordPress

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 ›

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *