Posted by : S4kuya jueves, 28 de agosto de 2014

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... Deja tu comentario si quieres }

  1. Ohayo!! :3

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

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

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

    ResponderBorrar
  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 ~

    ResponderBorrar
  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

    ResponderBorrar

.


ESTATUS BLOG
Visitas
BunnIes online
Desde: Enero del 2010
Meta seguir en la blogosfera
Haz visitado mi blog: Veces
Sígueme en Facebook Sígueme en Twitter Sígueme en instagram Sígueme en google+

Buscar este blog

Seguidores

Lista de reseñas

Fan Page

Entradas populares

Principales

Propósitos

VOY A JUGAR

ESTOY VIENDO
ESTOY LEYENDO

Copyright © 穛 S4Ku SEK4i -Black Rock Shooter - Designed by Johanes Djogan / Re-Design S4kuya