Valoración del artículo:Todo esto ya comenzamos a explicarlo en la introducción a las animaciones CSS, de modo que ahora vamos a hacer una práctica para asimilar los conocimientos adquiridos. Aunque hablando de ejemplos prácticos de animaciones CSS 3 queremos señalar que ya habíamos visto una práctica anteriormente, algo más sencilla que la que veremos a continuación, sobre animación de texto con CSS.
Para comenzar, podemos ver primero como quedaría nuestro ejemplo funcionando. Y recordar que para verlo, de momento, tenéis que utilizar Google Chrome o Safari.
Como podéis ver, es el típico fondo de letras que se mueven en la vertical, que conocemos si hemos visto la película Matrix, pero donde hemos colocado letras en vez de símbolos.
Lo primero que vamos a crear es nuestro archivo CSS con un fotograma clave y las propiedades de la animación.
@-webkit-keyframes fondo{
from {top: -260%;}
to {top: 100%;}
}
Con esto le estamos diciendo que vaya de arriba hacia abajo, con ello dará la sensación de que la animación comienza desde arriba de la parte superior de nuestra pantalla.
A continuación vemos los estilos y propiedades que vamos a necesitar para animar nuestro fondo.
#matrix{
margin: 1em auto;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
color: rgba(0, 255, 0, .7);
text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
position: relative;
}
Aquí principalmente damos los estilos a nuestro fondo y decimos que el texto que aparezca sea verde.
#matrix DIV{
position: absolute;
top: 0;
/* rotamos el texto*/
-webkit-transform-origin: 0%;
-webkit-transform: rotate(90deg);
-webkit-animation-name: fondo;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
}
Aquí ya damos las propiedades necesarias a nuestra animación. Lo primero que hacemos es rotarla 90 grados, esto lo hacemos para que las letras caigan y no vayan de izquierda a derecha. Ya solo nos queda lo que vimos en el artículo anterior, el nombre, las veces que se repite y la dirección.
Los estilos que vemos a continuación lo que van a hacer es que los textos bajen a diferentes velocidades y en distintos intervalos de tiempo.
.f1{
font-size: 1.2em;
}
.f2{
font-size: .9em;
}
.c1{
color: rgba(0, 255, 0, .5);
}
.d1{
-webkit-animation-duration: 4s;
}
.d2{
-webkit-animation-duration: 6s;
}
.d3{
-webkit-animation-duration: 8s;
}
.d4{
-webkit-animation-duration: 10s;
}
.de{
-webkit-animation-delay: 3s;
}
Con esto la parte de CSS esta lista, ahora pasamos a nuestro código HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Fondo animado con CSS</title>
<link rel="stylesheet" href="matrix.css" type="text/css">
</head>
<body>
<div id="matrix">
<div class="d3 f1" style="left:30px;">hgd4ldhbc9kpugccsrq</div>
<div class="d1 f2 c1" style="left:60px;">trzews0yfkldf4cvgbhjn</div>
<div class="d2 f1" style="left:80px;">sodhr49whuyfbsrnlepjh</div>
<div class="d4 c3 de" style="left:110px;">fue73sjf0tbkxpowfvn</div>
<div class="d2 c1" style="left:140px;">sjdhfgueiwfgivecjowxkwpkpomvcjoeuur</div>
<div class="d3 f2 c1" style="left:170px;">trzhfggh</div>
<div class="d1 c1" style="left:185px;">thgpmsrthdvytfv09876tqfgv</div>
<div class="d3 de" style="left:200px;">dhiwgfduesrjm</div>
<div class="d4 f1" style="left:250px;">osadharshdyfeujm</div>
<div class="d2 de" style="left:290px;">fwedjsdjhlgmrghftdercwewergjm</div>
<div class="d3 f2" style="left:310px;">sodhr49whayfbsrnlepjh</div>
<div class="d1 f1" style="left:350px;">p00oi0nf5sujhgdgbrjs36gdrgjpo</div>
<div class="d4 c1" style="left:390px;">h68kgdetklbfbeswk</div>
<div class="d2 de" style="left:410px;">dfrttvbscfsr</div>
<div class="d1 c1 de" style="left:4430px;">sgfyb0hfrese4kc</div>
<div class="d3 f1" style="left:530px;">hgd4ldhbc9kpugccsrq</div>
<div class="d1 f2 c1" style="left:560px;">trzews0yfkldf4cvgbhjn</div>
<div class="d2 f1" style="left:580px;">sodhr49whuyfbsrnlepjh</div>
<div class="d4 c3 de" style="left:610px;">fue73sjf0tbkxpowfvn</div>
<div class="d2 c1" style="left:740px;">sjdhfgueiwfgivecjowxkwpkpomvcjoeuur</div>
<div class="d3 f2 c1" style="left:770px;">trzhfggh</div>
<div class="d1 c1" style="left:785px;">thgpmsrthdvytfv09876tqfgv</div>
<div class="d3 de" style="left:800px;">dhiwgfduesrjm</div>
<div class="d4 f1" style="left:850px;">osadharshdyfeujm</div>
<div class="d2 de" style="left:890px;">fwedjsdjhlgmrghftdercwewergjm</div>
<div class="d3 f2" style="left:910px;">sodhr49whayfbsrnlepjh</div>
<div class="d1 f1" style="left:950px;">p00oi0nf5sujhgdgbrjs36gdrgjpo</div>
<div class="d4 c1" style="left:990px;">h68kgdetklbfbeswk</div>
<div class="d2 de" style="left:1010px;">dfrttvbscfsr</div>
<div class="d1 c1 de" style="left:1030px;">sgfyb0hfrese4kc</div>
</div>
</body>
</html>
Si os fijáis tenemos varios DIV con las letras y la posición en la que se colocan, si no hacemos esto nos saldría todo junto y no se verían por toda la pantalla.
Podemos poner tantos DIV como deseemos siempre viendo la posición en la que los colocamos y teniendo en cuenta las resoluciones de pantalla.
Como podéis ver, nuestro ejemplo resulta un poco laborioso y teniendo en cuenta que simplemente sería el fondo, al que deberíamos añadir el resto de nuestro código para la creación de nuestra web, la cosa se queda un poco más compleja de lo que desearíamos. De momento, hay que tomar este ejemplo como algo experimental, pues debido a su complejidad y que las animaciones CSS no funcionan en todos los navegadores, no sería muy recomendable utilizar la técnica para una web real. Por lo menos queremos que sirva para ver el tema de las animaciones CSS 3, pues el ejemplo es bastante interesante.
Por último os dejo el ejemplo funcionado en una página aparte.
En el siguiente artículo veremos un ejemplo parecido pero esta vez caerá nieve y con distintos movimientos en vez de la caída recta de este ejemplo.
Compartir en redes sociales
| CSS3 y los navegadores Por: Amshel Levin | 29/11/2010
|
 franz16... | no se ven los efectos | 02/12/2010 |
| en cromium se ve | 13/12/2010 |
| animación | 27/8/2011 |
elposi1... | Saludo | 14/3/2012 |
Usuarios: 
29 de November de 2010
