jueves, 28 de agosto de 2014

(ノ◕ヮ◕)ノ*:・゚✧ Efecto para imágenes "Scale Rotate" [Tutorial]

Hola queridos lectores Aquí Saku-Chan reportándose con la entrada de hoy , en este día Jueves les traigo un tutorial ya que Danisasunaru-Chan me ha preguntado si podía darle el link del  tutorial  con el que logre ese efecto que ven en mi imágenes, pues bien en respuesta le traje el tutorial para lograr dicho efecto 

Antes de todo quiero decir que este no es tutorial propio si no es un tutorial creado por mi comadre Yukii, así que los créditos son 100% de ella.yo solo le puse el nombre ya que no tenia XD, Bueno comencemos.

Primero que todo debemos buscar en nuestra plantilla (NO olvides apretar CTRL + F para una búsqueda mas rápida) y luego pega el siguiente código antes de 
@-webkit-keyframes shakee {
 0% {-webkit-transform: scale(1);}  10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
 30%, 50%, 70%, 90% {-webkit-transform: scale(1.3) rotate(3deg);}
 40%, 60%, 80% {-webkit-transform: scale(1.3) rotate(-3deg);}
 100% {-webkit-transform: scale(1) rotate(0);}
}
@-moz-keyframes shakee {
 0% {-moz-transform: scale(1);}  10%, 20% {-moz-transform: scale(0.9) rotate(-5deg);}
 30%, 50%, 70%, 90% {-moz-transform: scale(1.3) rotate(5deg);}
 40%, 60%, 80% {-moz-transform: scale(1.3) rotate(-5deg);}
 100% {-moz-transform: scale(1) rotate(0);}
}
@-o-keyframes shakee {
 0% {-o-transform: scale(1);}  10%, 20% {-o-transform: scale(0.9) rotate(-5deg);}
 30%, 50%, 70%, 90% {-o-transform: scale(1.3) rotate(5deg);}
 40%, 60%, 80% {-o-transform: scale(1.3) rotate(-5deg);}
 100% {-o-transform: scale(1) rotate(0);}
}
@keyframes shakee {
 0% {transform: scale(1);}  10%, 20% {transform: scale(0.9) rotate(-5deg);}
 30%, 50%, 70%, 90% {transform: scale(1.3) rotate(5deg);}
 40%, 60%, 80% {transform: scale(1.3) rotate(-5deg);}
 100% {transform: scale(1) rotate(0);}
}

img{
}
img:hover{
-webkit-animation-name: shakee;
-moz-animation-name: shakee;
-o-animation-name: shakee;
animation-name: shakee;
-webkit-animation-duration: 1s;
}

Si tienes plantilla clásica (Blogskin) solo debes pegar el código antes de y listo.

Esa seria la entrada de hoy si les sirvió ya saben que agradecer no cuesta nada y que mejor forma de agradecer que comentando .


 

8 comentarios:

  1. Ohayo!! :3

    WOOOOOW que lindo te quedo el new diseño!! me encanta :D
    y que buen tutorial jajaja grax x el efecto

    ResponderEliminar
  2. Muchas gracias por el tutoriales!!!
    Lo aplicarse en mi blogs con loa créditos correspondiestes !! :)

    ResponderEliminar
  3. Muy interesante la entrada y gracias por la aportación :D
    Siempre me han gustado los diseños de tu blog <3
    Saludos!

    ResponderEliminar
  4. Hola ~
    Soy nueva en tu blog y la verdad es que por lo que he visto hasta ahora, está muy pero que muy bien ^^ Tu contenido es muy bueno y el diseño no está nada mal.
    Y en cuanto a la entrada, no sabía cómo se hacía eso con las imágenes, así que gracias por compartirlo con nosotros ^-^
    Un saludo ~

    ResponderEliminar
  5. Hola ~
    Venía para avisarte de que el 30 de Agosto a las 00:00 (hora peninsular española) será publicado en mi blog un premio que me dieron hace unas semanas y tú eres una de las 11 nominadas a las que he nominado para hacerlo.
    Un saludo :D

    ResponderEliminar

Related Posts Plugin for WordPress, Blogger...

Google+ Followers