Comunidad de diseño web y desarrollo en internet online

Animación de nubes con CSS3

En este tutorial haremos una animación sencilla de nubes con CSS3.
Ver animación

Aquí la estructura en HTML5:

Código :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>Animacion</title>
   <link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
   <div id="sq">
      <div class="circ1"></div>
      <div class="circ2"></div>
      <div class="circ3"></div>
   </div>
   <div id="sq2">
      <div class="circ1"></div>
      <div class="circ2"></div>
      <div class="circ3"></div>
   </div>
   <div id="sq3">
      <div class="circ1"></div>
      <div class="circ2"></div>
      <div class="circ3"></div>
   </div>
</body>
</html>


Dibujar una nube con CSS3



Esto es sencillo. Crearemos 3 divs llamadas circ1, circ2 y circ3, 1 con forma redonda y 2 ovaladas, con distintos tamaños y las encimaremos formando el dibujo de una nube sencilla:





Crearemos el círculo:

Código :

.circ1{
   width:120px;
   height:120px;   
   border-radius:120px;
   background-color:rgb(255, 255, 255);      
   }

Ahora los ovalos: acá especificaremos dos radios en lugar de uno, para lograr el efecto de ovalado. También el alto será menor que el ancho.

Código :

.circ2{
   width:150px;
   height:80px;      
   border-radius: 80px / 50px;
   background-color:rgb(255, 255, 255);   
   }
      
.circ3{
   width:150px;
   height:90px;   
   border-radius: 80px / 50px;
   background-color:rgb(255, 255, 255);      
   }

Ahora los encimaremos usando solamente diferentes valores de márgenes para cada capa.

Código :

.circ1{   
   width:120px;
   height:120px;   
   border-radius:120px;
   background-color:rgb(255, 255, 255);   
        margin:20px 0 0 60px;   
   }


.circ2{
   width:150px;
   height:80px;      
   border-radius: 80px / 50px;
   background-color:rgb(255, 255, 255);   
        margin:-90px 0 0 80px;
   }
      
.circ3{
   width:150px;
   height:90px;   
   border-radius: 80px / 50px;
   background-color:rgb(255, 255, 255);   
   margin:-90px 0 0 0px;   
   }


Especificar los keyframes



Utilizaré la propiedad transform para trasladar y escalar las nubes.

Código :

@-webkit-keyframes animar{
    0%  { } 
     50% { -webkit-transform:translateX(700px) scale(1.2);}
     100% {-webkit-transform:translateX(0px); }
}



Aplicar la animación



Los 3 círculos (circ1, circ2 y circ3) estarán contenidos en #sq. A esta ID le especificaremos la animación y sus propiedades, así como también la opacidad.

Código :

#sq{
   -webkit-animation-name: animar;
   -webkit-animation-duration: 20s;
   -webkit-animation-timing-function: lineal;
   -webkit-animation-iteration-count:infinite;
   opacity: 0.6;
   margin:0;
   position:absolute;
}


ya le aplicamos la animacion llamada “animar” a la capa #sq. También le aplicamos margen y opacidad porque ahora crearemos #sq1 y #sq2, y dentro le pondremos las nubes a cada ID. Entonces tendremos ahora 3 nubes que irán de un lado a otro y en algunos momentos se encimarán, y allí apreciaremos el efecto de la transparencia.

Para que cada nube tenga un tiempo diferente, a cada ID le especificaremos diferentes márgenes y diferente tiempo de animación (animation-duration).

Nos quedaría lo siguiente:

Código :

#sq{
   -webkit-animation-name: animar;
   -webkit-animation-duration: 20s;
   -webkit-animation-timing-function: lineal;
   -webkit-animation-iteration-count:infinite;
   opacity: 0.6;
   margin:0;
   position:absolute;
}

#sq2{
   -webkit-animation-name: animar;
   -webkit-animation-duration: 15s;
   -webkit-animation-timing-function: lineal;
   -webkit-animation-iteration-count:infinite;
   opacity: 0.4;
   position:absolute;
   margin:30px 0 0 0;
}

#sq3{
   -webkit-animation-name: animar;
   -webkit-animation-duration: 12s;
   -webkit-animation-timing-function: lineal;
   -webkit-animation-iteration-count:infinite;
   opacity: 0.7;
   position:absolute;
   margin:100px 0 0 50px;
}


Recomiendo este tutorial de prefijos automáticos en CSS3.

Gracias a @kinduff por las correcciones :)

espero les sirva!!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate