Efeito Speed - Blog

Olá  Batutinhos do meu coração! Como estão vocês?

Estou me sentindo um pouco mal, minha cabeça esta latejando desde ontem e pra piorar minha situação, estou sem remédio. Eu não iria postar hoje, mas não gosto deixar o blog sem postagem, então trouxe um efeito que achei lá  no Chá com anjos, então os créditos vão pra ele.

O nome como dito no título é efeito speed, esse efeito fica indo pro lado e pro outro quando passa o mouse. Eu vou ensinar dois modelos. O modelo 1 eu fiz uma modificação e o modelo 2 é original do Blog acima.

Preview ''efeito 1"

Preview "efeito 2"

 Para quem quiser usar o Efeito 1, vá em Modelo depois em Editar HTML e procure por:

]]></b:skin>

 Acima dele cole esse código:

@-webkit-keyframes rattle1 {
0% {-webkit-transform: translatex(10px);}
50% {-webkit-transform: translatex(-20px);}
100% {-webkit-transform: translatex(20px);}
}
.rattle1 {-webkit-transition: .1s; border-radius: 10px; box-shadow: 1px 1px #;}
.rattle1:hover {-webkit-animation: rattle1 .5s alternate 2 linear;}

Em um Gadget cole o seguinte código:

<img src="LINK DA IMAGEM" class="rattle1">

Agora se quiser usar o Efeito 2, vá em seu HTML e acima de:

]]></b:skin> 

Cole esse código:

@-webkit-keyframes rattle2 {0% {-webkit-transform: translatex(10px);}50% {-webkit-transform: translatex(-20px);}100% {-webkit-transform: translatex(20px);}}.rattle2 {-webkit-transition: .1s; border-radius: 10px; box-shadow: 1px 1px #;}.rattle2:hover {-webkit-animation: rattle2 .4s alternate infinite linear;} 

 Em um Gadget cole:

<img src="LINK DA IMAGEM" class="rattle2">

Salve e pronto!

Espero que não tenha ficado muito embolado, não estou muito no clima de postar nada por causa dessa dor de cabeça que esta acabando comigo :'( Espero que tenham gostado! Qualquer dúvida pergunte nos comentários. Bjooos :**