Como colocar nieve cayendo en tu web o blog

Hacía tiempo que hemos visto como muchas webs y blogs apuestan por hacer animaciones en sus páginas relacionadas con las fechas que vivimos. Navidades, Semana Santa, Días festivos, …. y un largo etcétera llaman la atención en muchos casos tanto como los famosos Google Doodle, que nacieron básicamente bajo esa idea.

Let it snow

En realidad lo que les vamos a dejar hoy es una forma sencilla de colocar nieve cayendo en su portada, es decir una animación que provoque el efecto de que está nevando en su blog, lo cual no deja de ser una tontería, pero con esas tonterías la audiencia siempre está encantada. Y si es así de simple colocar la nieve cayendo en tu web o blog como les vamos a contar a continuación ¿Por qué no hacerlo?

En todo caso, hay que modificar código, con lo que este artículo va para quienes ya han tocado el CSS o tienen ganas de aprender cómo hacerlo. Justo a continuación os dejamos con las secuencias que deben aparecer para que el lector vea el efecto de nieve cayendo. A mi la idea me ha encantado, así que no me digan los que se dedican a ir un poco más allá del diseño ya preconfigurado que siempre me olvido de ustedes, que aunque sea por Navidad, esta vez hemos llegado.

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

body {
background-color: #6b92b9;
background-image: url(‘snow.png’), url(‘snow3.png’), url(‘snow2.png’);
animation: snow 20s linear infinite;
}

Más info | @keyframes / Design Shack

Últimos artículos

Scroll al inicio