Fondo nevando con CSS 3

  • Por
  • CSS
Taller de animación CSS 3, en el que creamos un fondo donde simulamos que están cayendo copos de nieve, utilizando tan sólo con CSS 3.
Las características de las Hojas de Estilo en Cascada en su tercera especificación, incluyen diversas utilidades para crear animaciones sin necesidad de programar, solamente definiendo estilos CSS. Es algo que ya empezamos a explicar en el artículo de introducción a las animaciones CSS.

En estos momentos estamos ofreciendo varios ejemplos prácticos sobre cómo crear distintos tipos de animaciones CSS. En el presente artículo veremos un ejemplo de fondo con copos de nieve que caen por nuestra pantalla, con movimientos de forma ondulante. Es un ejemplo parecido al que hicimos anteriormente, en el artículo sobre el fondo de Matrix, pero en esta ocasión en vez de hacer movimientos rectos en la vertical, serán movimientos curvos.

De modo que, la complicación adicional en esta práctica será realizar esos movimientos circulares típicos de los copos de nieve, para los que vamos a enseñar una nueva propiedad de las animaciones CSS, transform, a la que se accede en el momento de escribir este artículo con la propiedad temporal -webkit-transform, que está disponible para navegadores como Chrome o Safari. Dicho sea de paso, aprender esta propiedad nos vendrá muy bien porque dará mucha opciones a la hora de animar objetos.

Como hacemos en estos ejercicios prácticos, lo primero que recomendamos hacer es ver el ejemplo funcionando en una página aparte, donde se podrá apreciar el resultado final de la práctica que pretendemos realizar.

Ahora vamos a ver el código CSS necesario para crear nuestro fondo. El cual será reducido, pero donde simplemente tenemos que aumentar los tamaños para sacar el mismo resultado en un fondo mayor.

#container{      
   background: #666 url(images/fondo-nieve.jpg) no-repeat;
   width: 400px;
   height: 300px;      
   position: relative;   
}

A continuación damos propiedades al conjunto de la nieve en general y luego a cada copo en particular.

@-webkit-keyframes nieve{
   from {top: -10px;}
   to {top: 450px;}
}
      
@-webkit-keyframes copos{
    0% { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
    100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}

Con el primero decidimos que los copos vayan de la parte superior a la inferior, del tal forma que parezca que aparecen por arriba y desaparecen por abajo.

En el segundo lo que le decimos es que cada copo va ir girando haciendo una semicircunferencia, saliendo el copo desde 10px para finalizar en 75px.

Una vez que tenemos ya nuestros fotogramas clave nos queda darle propiedades a nuestras animaciones. Para ello creamos un estilo para las animaciones nieve y copos y a parte, una serie de estilos para cada copo en particular. Aquí, como en el ejercicio anterior, podemos crear todos los copos que necesitemos.

#snow div {
   position: absolute;
   top: -40px;
   -webkit-animation-name: nieve, copos;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal;
   -webkit-animation-timing-function: ease-in;
}
.copos {
   color: #fff;
   font-size: 1em;
   position: absolute;   
}
.copos.f1 {
   left: 40px;
   -webkit-animation-duration: 5s;   
}
.copos.f2 {
   font-size: 1.8em;
   left: 120px;
   -webkit-animation-duration: 7s;   
}
.copos.f3 {
   left: 200px;
   -webkit-animation-duration: 8s;   
}
.copos.f4 {
   font-size: 1.5em;
   left: 280px;
   -webkit-animation-duration: 6s;   
}

Considero que no hace falta explicar este código, que ya hemos visto en los ejemplos anteriores de nuestro manual, por lo que paso a poneros el código HTML necesario para que nuestro fondo funcione.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Fondo animado con CSS</title>
<link rel="stylesheet" href="nieve.css" type="text/css">
</head>

<body>
<div id="container">

<div id="snow" class="snow">   
   <div class="copos f1">?</div>
   <div class="copos f2">?</div>
   <div class="copos f3">?</div>
   <div class="copos f4">?</div>
</div>
<div id="ground"></div>

</div>

</body>
</html>

De este código cabe destacar que no hemos utilizado imágenes para generar los copos de nieve, simplemente hemos colocado el código HTML que nos muestra el símbolo “copo”.

Podéis volver a ver el ejemplo funcionando en una pagina aparte.

En el siguiente artículo veremos cómo animar un muñeco para ir haciendo algo más que fondos animados.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

angel

30/11/2010
No funciona en Firefox
Tanto este ejemplo como el anterior no funcionan en Firefox 3.6.12

Saludos

Edgar

01/12/2010
Es realmente css3?
¿No se debería utilizar los comandos estándar del CSS3 en vez de los específicos del Webkit? O es que aun ningún navegador los soporta?

zulo800

01/12/2010
Símbolo "Copo"
Leo que "se ha usado el símbolo 'copo' en HTML" para generar los copos de nieve. ¿Qué símbolo es éste al que os referís?

elias

01/12/2010
en firefox no me funciono lo de la nieve, en safari si
en firefox no me funciono lo de la nieve, en safari si

Angel

15/12/2010
No funciona en Firefox
Lo he probado con 3 navegadores y sólo funciona en uno:
- Firefox 3.6.13, NO FUNCIONA.
- Safari 5.0.3, SI FUNCIONA.
- Camino 2.0.6, NO FUNCIONA
Lo lógico sería que pusieran ejemplos que funcionaran en, al menos, en Firefox ya que es un navegador bastante usado.
Atentamente.

Lorenzo

15/12/2010
En Mozilla Firefox no funciona?
a l menos en mi Mozilla 5.0 - Firefox 3.6.13 no se ve... en Chrome sí que lo veo - muy chulo!
Saludos

lost

15/12/2010
no funciona
en firefox no funciona

Luis

15/12/2010
En firefox no sirve
la version de firefox es 3.6.13

Jorge

15/12/2010
¿Por qué solo funciona con google Chrome?
¿Por qué solo funciona con google Chrome?

veluis

16/12/2010
fondo de nieve
pues me funciono bien en chrome, pero en lugar de copos de nieve son signos de interrogación, ALGO ME ESTA FALLANDO?

Alraul

17/12/2010
Signo Interrogacion en vez de copos de Nieve
Para que aparezcan los copos de Nieve en vez del signo de interrogacion hay que cambiar el parrafo dentro del archivo HTML, por este:

<div id="snow" class="snow">
<div class="copos f1">&#10053;</div>
<div class="copos f2">&#10052;</div>
<div class="copos f3">&#10053;</div>
<div class="copos f4">&#10052;</div>
</div>


Fijate que en tu archivo HTML aparece el "?" en vez de "&#10053", etc.

midesweb

16/3/2011
Compatibilidad de navegadores
Ejemplo que estáis viendo es para webkit, pues tiene etiquetas específicas de ese navegador (Chrome o Safari están construidos con WebKit)

Pero seguramente ya, ahora que ha salido Firefox 4 e Internet Explorer 9, se pueda ver en otros navegadores en funcionamiento también. No obstante estos ejemplos habría que completarlos con etiquetas específicas para esas versiones de navegadores.

En el momento que CSS 3 sea un estándar en estado de implementación recomendada, se podrán poner en funcionamiento con las etiquetas definitivas que se hayan definido en esa versión de CSS, en vez de las etiquetas propias de cada navegador.

Pardilla

05/1/2015
Otros navegadores
Para que funcione en Firefox yo duplico el css y sustituyo -moz en vez de -webkit y me funciona correctamente. Para ópera lo mismo pero con -o (aunque no he podido probarlo todavía espero que funcione).
Sin "prefijo" por llamarlo de alguna manera por si algún otro navegador especialito no funciona, y con -ms para explorer. Lo que pasa es que hay algunas versiones del explorer que también falla... así que mi otra opción es usar otro código para explorer... un rollo pero es lo que hay!
Gracias por la página es muy útil pese a este pequeño gran inconveniente.
Suerte y un abrazo!

Daniel

09/9/2016
No leeis
Al principio del curso de animación CSS3 dijeron que solo se podrian ver en navegadores con tecnología webkit, así que solamente en chrome y safari, que joer macho, como os gusta quejaros sin leer eh.

Miguel

10/2/2018
Excelente
Hola, gracias por la contribución, está muy lograda la animación. Mi pregunta es , ¿ cómo podía hacerlo con hojas de árbol?
Gracias, espero me guies.