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!!
¡Espero el tutorial de sol y los pajaritos!
@Freddie 'chas gracias ché!! usálo! para eso está
Por Oscar el 10 de Enero de 2012
Por edwindeleon el 10 de Enero de 2012
Por juan el 10 de Enero de 2012
Por el 10 de Enero de 2012
Por juan el 11 de Enero de 2012
Por elwawi el 11 de Enero de 2012
en crome funca
pero en firefox no se mueve
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Animacion</title>
<link rel="stylesheet" type="text/css" href="estilos.css" media="all" />
<script src="modernizr-2.0.6.js"></script>
</head>
Por juan el 11 de Enero de 2012
Por elwawi el 12 de Enero de 2012
.circ1{
background:#ccc;
width:120px;
height:120px;
border-radius:120px;
margin:20px 0 0 60px;
background-color:rgb(255, 255, 255);
border:1px solid red;
}
saludos
Código :
body{ background-color:rgb(95, 209, 237); } @keyframes animar{ 0% { } 50% { transform:translateX(700px) scale(1.2);} 100% {transform:translateX(0px); } } .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; } #sq{ animation-name: animar; animation-duration: 20s; animation-timing-function: lineal; animation-iteration-count:infinite; opacity: 0.6; margin:0; position:absolute; } #sq2{ animation-name: animar; animation-duration: 15s; animation-timing-function: lineal; animation-iteration-count:infinite; opacity: 0.4; position:absolute; margin:30px 0 0 0; } #sq3{ animation-name: animar; animation-duration: 12s; animation-timing-function: lineal; animation-iteration-count:infinite; opacity: 0.7; position:absolute; margin:100px 0 0 50px; }Muy bueno Mariux, en serio, me encanta! increible como una tecnologia enfocada a estilos ha evolucionado tanto.
Gracias por el tuto!
Por pablo el 13 de Enero de 2012
¿esto se podria llegar a utilizar como fondo de una web? y de ser asi ¿como se colocarian capas para el contenido sobre este fondo?
codigo html5 : nubes.html
<!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>
para el css: style.css
body{
background-color:rgb(95, 209, 237);
}
@-webkit-keyframes animar{
0% { }
50% { -webkit-transform:translateX(700px) scale(1.2);}
100% {-webkit-transform:translateX(0px); }
}
.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;
}
#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;
}
body{
background-color:#aad8d0;
}
@-webkit-keyframes animar{
0% { }
50% { -webkit-transform:translateX(700px) scale(1.2);}
100% {-webkit-transform:translateX(0px); }
}
@-moz-keyframes animar {
0% { }
50% { -moz-transform:translateX(700px); }
100% {-moz-transform:translateX(0px); }
}
.circ1{
width:120px;
height:120px;
border-radius:120px;
background-color:rgb(255, 255, 255);
margin:20px 0 0 60px;
font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
font-size:10px;
color:#;
text-align:center;
}
.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;
}
#sq{
-webkit-animation-name: animar;
-webkit-animation-duration: 50s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
-moz-animation-name: animar;
-moz-animation-duration: 50s;
-moz-animation-timing-function: lineal;
-moz-animation-iteration-count:infinite;
opacity: 0.6;
margin:0;
position:absolute;
}
#sq2{
-webkit-animation-name: animar;
-webkit-animation-duration: 85s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
-moz-animation-name: animar;
-moz-animation-duration: 50s;
-moz-animation-timing-function: lineal;
-moz-animation-iteration-count:infinite;
opacity: 0.8;
position:absolute;
margin:30px 0 0 0;
}
#sq3{
-webkit-animation-name: animar;
-webkit-animation-duration: 30s;
-webkit-animation-timing-function: lineal;
-webkit-animation-iteration-count:infinite;
-moz-animation-name: animar;
-moz-animation-duration: 50s;
-moz-animation-timing-function: lineal;
-moz-animation-iteration-count:infinite;
opacity: 1;
position:absolute;
margin:100px 0 0 50px;
}
Por Anis_Web el 20 de Marzo de 2012