Nieve animada con CSS

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

Comparte para difundir

Si te ha gustado nuestro contenido ahora puedes ayudar a difundirlo en las redes sociales de manera sencilla usando los siguientes botones:

Envía
Pinea
Print

Categorías

Diseño Web

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 especial el diseño de glifos e iconos, así como trastear con programas de edición en mi tiempo libre. Entre otros de mis intereses se encuentran el cine y la música oriental.

Deja un comentario

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

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.