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 .
- Back to Home »
- efecto imagen , Tutoriales »
- (ノ◕ヮ◕)ノ*:・゚✧ Efecto para imágenes "Scale Rotate" [Tutorial]
Muchas gracias por el tutoriales!!!
ResponderBorrarLo aplicarse en mi blogs con loa créditos correspondiestes !! :)
Muy interesante la entrada y gracias por la aportación :D
ResponderBorrarSiempre me han gustado los diseños de tu blog <3
Saludos!
Hola ~
ResponderBorrarSoy 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 ~
ssss
ResponderBorrarMuchas gracias :D eres la mejor!!<3
ResponderBorrarHola ~
ResponderBorrarVení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
buen tutorial wapi ^^
ResponderBorrar