Efectos en tus imagenes *o*!!

Este tuto esta muy bonito (para mi xD).
Vamos a Diseño   Personalizar  Añadir CSS..

Aqui los efectos :





img:hover{
-webkit-animation-name: MMCa1;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes MMCa1 /* Firefox*/
{
{ -ms-transform:: translate(0px, 0px) rotate(0deg); }
 50% { -moz-transform:  translate(-7px, 0px) rotate(7deg); }
}
@-ms-keyframes MMCa1 /* IE9*/
{
  0% { -ms-transform: translate( 0px, 0px) rotate(0deg); }
 50% { -ms-transform: translate(-7px, 0px) rotate(7deg); }
}
@-webkit-keyframes MMCa1 /* Safari and Chrome */
{
  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 50% { -webkit-transform: translate(-7px, 0px) rotate(7deg); }
}

Efecto Giratorio : 


img:hover{border-radius: 100%;-webkit-animation-name: MMCa2;-webkit-animation-duration: 5s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}@-moz-keyframes MMCa2 /* Firefox*/{{ -ms-transform:: translate(0px, 0px) rotate(0deg); } 50% { -moz-transform:  translate(0px, 0px) rotate(360deg); }}@-ms-keyframes MMCa2 /* IE9*/{  0% { -ms-transform: translate( 0px, 0px) rotate(0deg); } 50% { -ms-transform: translate( 0px, 0px) rotate(360deg); }}@-webkit-keyframes MMCa2 /* Safari and Chrome */{  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 50% { -webkit-transform: translate(0px, 0px) rotate(360deg); }}



Efecto :


img:hover {border-radius: ;-webkit-animation-name: MMCa3;-webkit-animation-duration: 1s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}@-moz-keyframes MMCa3 /* Firefox*/{{ -ms-transform:: translate(0px, 0px) rotate(0deg); } 20% { -moz-transform:  translate(-7px, 7px) rotate(0deg); } 50% { -moz-transform:  translate(0px, 7px) rotate(0deg); } 70% { -moz-transform:  translate(-7px, 7px) rotate(0deg); }}@-ms-keyframes MMCa3 /* IE9*/{  0% { -ms-transform: translate( 0px, 0px) rotate(0deg); } 20% { -ms-transform: translate( -7px, 7px) rotate(0deg); } 50% { -ms-transform: translate( 0px, 7px) rotate(0deg); } 70% { -ms-transform: translate( -7px, 7px) rotate(0deg); }}@-webkit-keyframes MMCa3 /* Safari and Chrome */{  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 20% { -webkit-transform: translate(-7px, 7px) rotate(0deg); } 50% { -webkit-transform: translate(0px, 7px) rotate(0deg); } 70% { -webkit-transform: translate(-7px, 7px) rotate(0deg); }}

Los efectos  no se pueden ver en mi blogui ya que escoji el tercer efecto pero bueno lo pueden ver en el blog de Mell :D!!

Creditos : Mell Blog

No hay comentarios: