Ejemplo De Cc3
Páginas: 4 (954 palabras)
Publicado: 5 de diciembre de 2012
-------------------------------------------------
Ejercicios sobre animaciones CSS3 realizados en un evento en directo emitido en DesarrolloWeb.com con distintas demostraciones de las posibilidadesde esta técnica del HTML5.
Por Jorge Vargas Vega
El pasado día 6 de junio retransmitimos para DesarrolloWeb.com una charla en donde estuve hablando de las animaciones CSS3. Una interesanteintroducción a las posiblidades que existen ya mismo para las personas, que como yo, hemos salido del mundo Flash para incorporarnos en los estándares basados en HTML5.
Durante ese evento que compartí conotras personas del equipo de DesarrolloWeb.com, realicé diversos ejemplos que quiero ahora publicar en este artículo. Realmente los ejemplos no son nada complicados, sino que sirven para ilustrar lasposibilidades de las animaciones CSS3 a personas que no han trabajado nunca con esta utilidad relativamente nueva.
Nota: Al final de este artículo podrás encontrar la grabación de la cita deanimaciones CSS3, en donde se ofrecen muchas explicaciones interesantes que os complementarán los códigos que estoy compartiendo con vosotros.
Ejemplo básico: mi primera animación CSS
En esteejemplo realizamos nuestra primera animación. Es muy simple, pero ya demuestra bien las posibilidades que tendremos a poco que dominemos este aspecto de las CSS3.
Tenemos una capa "div" que tiene unaimagen de fondo. Esa capa se mueve por la pantalla con tres "Keyframes". Los frames clave sirven para expresar los distintos estados de la animación y corresponden al mismo concepto que podrán haberaprendido otros desarrolladores en Flash o ex-flasheros como yo.
El código del ejemplo es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"><title>GIRAR</title>
<style type="text/css">
#circulo {
background-image: url(circulo.png);
height: 100px;
position: relative;
width: 100px;
-webkit-animation:gira 3s alternate...
Ejercicios sobre animaciones CSS3 realizados en un evento en directo emitido en DesarrolloWeb.com con distintas demostraciones de las posibilidadesde esta técnica del HTML5.
Por Jorge Vargas Vega
El pasado día 6 de junio retransmitimos para DesarrolloWeb.com una charla en donde estuve hablando de las animaciones CSS3. Una interesanteintroducción a las posiblidades que existen ya mismo para las personas, que como yo, hemos salido del mundo Flash para incorporarnos en los estándares basados en HTML5.
Durante ese evento que compartí conotras personas del equipo de DesarrolloWeb.com, realicé diversos ejemplos que quiero ahora publicar en este artículo. Realmente los ejemplos no son nada complicados, sino que sirven para ilustrar lasposibilidades de las animaciones CSS3 a personas que no han trabajado nunca con esta utilidad relativamente nueva.
Nota: Al final de este artículo podrás encontrar la grabación de la cita deanimaciones CSS3, en donde se ofrecen muchas explicaciones interesantes que os complementarán los códigos que estoy compartiendo con vosotros.
Ejemplo básico: mi primera animación CSS
En esteejemplo realizamos nuestra primera animación. Es muy simple, pero ya demuestra bien las posibilidades que tendremos a poco que dominemos este aspecto de las CSS3.
Tenemos una capa "div" que tiene unaimagen de fondo. Esa capa se mueve por la pantalla con tres "Keyframes". Los frames clave sirven para expresar los distintos estados de la animación y corresponden al mismo concepto que podrán haberaprendido otros desarrolladores en Flash o ex-flasheros como yo.
El código del ejemplo es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"><title>GIRAR</title>
<style type="text/css">
#circulo {
background-image: url(circulo.png);
height: 100px;
position: relative;
width: 100px;
-webkit-animation:gira 3s alternate...
Leer documento completo
Regístrate para leer el documento completo.