Morton 1 de abril de 2011 a las 05.43
   Imprimir artículo
elWebmaster.com

CSS3: C贸mo crear 铆conos giratorios con efecto de zoom en tu sitio web


css3wide1Las animaciones con CSS3 son incre铆bles. De buen rendimiento, y m谩s sencillas que utilizar Javascript, son el futuro en cuanto al potencial de los navegadores. Uno de los efectos m谩s atractivos es el de hacer a tus 铆conos giratorios con un peque帽o grado de zoom. 驴Quieres saber c贸mo lograrlo?

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com

Haz clic en este enlace para ver una demostraci贸n del efecto >>

Es importante destacar que esta animaci贸n va orientada a navegadores modernos que puedan utilizar Webkit sin inconvenientes. Con esto en cuenta, vamos a ver el c贸digo CSS que ser谩 necesario para esta animaci贸n:

  1. @-webkit-keyframes rotater {
  2. 0% { -webkit-transform:rotate(0) scale(1) }
  3. 50% { -webkit-transform:rotate(360deg) scale(2) }
  4. 100% { -webkit-transform:rotate(720deg) scale(1) }
  5. }

La propiedad -webkit-transform es la encargada de esta animaci贸n. Def铆ne su valor como 0% con una rotaci贸n de 0 y escalada a 1, es decir, el estado original del elemento. Al 50% de la animaci贸n, el elemento debe ser rotado a 360 grados (es decir, una vuelta completa), y as铆 el elemento deber铆a crecer al doble de su tama帽o. Al 100%, el elemento debe volver a su escala original y rotar 720 grados, vi茅ndose de esa manera igual que al principio.

Con nuestra animaci贸n ya creada, es tiempo de aplicar la animaci贸n a un elemento en su estado “hover” (es decir, cuando el usuario posa el mouse sobre este elemento):

  1. a.advert:hover {
  2.   -webkit-animation-name:rotater;
  3.   -webkit-animation-duration:500ms;
  4.   -webkit-animation-iteration-count:1;
  5.   -webkit-animation-timing-function:ease-out;
  6.  
  7.   -moz-transform:rotate(720eg) scale(2);
  8.   -moz-transition-duration:500ms;
  9.   -moz-transition-timing-function: ease-out;
  10. }

El evento es asignado usando la propiedad -webkit-animation-name. Las propiedades adicionales asignadas son:

  • -webkit-animation-duration que le da a la animaci贸n 500 milisegundos de duraci贸n
  • -webkit-animation-iteration-count hace que la animaci贸n ocurra una sola vez
  • -webkit-animation-timing-function configura la transici贸n de la animaci贸n

隆Y listo! Hemos finalizado de crear nuestra animaci贸n. 隆Hasta la pr贸xima!

Haz clic en este enlace para ver una demostraci贸n del efecto >>

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (6)

  1. Persim贸n dice:

    El efecto es un poco churrero no?

  2. Simbelmyne dice:

    驴C贸mo puedo colocarlo en un theme de WordPress?

  3. yopichoi dice:

    S铆, la verdad es que no es el efecto m谩s agradable que he visto.

  4. Iconos preciosos dice:

    Iconos va sin tilde, 驴no?

  5. CSS3: C贸mo crear 铆conos giratorios con efecto de zoom en tu sitio web « ITecnoSolution dice:

    […] Es importante destacar que esta animaci贸n va orientada a navegadores modernos que puedan utilizar Webkit sin inconvenientes. Con esto en cuenta, vamos a ver el c贸digo CSS que ser谩 necesario para esta animaci贸n: PLAIN TEXT […]

  6. jess adio dice:

    el titulo dice iconos giratorios, mas no dise elegantes, es solo un efecto mas de css3 churrero o no es bueno

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder