Efeito Speed

Olá Anjos!

Desculpe não ter postado mais cedo, não consegui dormir essa noite e fiquei cansada a tarde toda. Estava morrendo de sono, mas não consegui dormir. Agora que é noite, o sono também não aparece. Desse jeito vou ficar igual a um zumbi!

Trouxe um tutorial bem legal que encontrei no blog World of Tutos, estou reblogando com a permissão da autora. O tutorial chama-se efeito Speed, quando você passa o mouse, a imagem balança de um lado para o outro. Sempre quis fazer um menu com um efeito parecido, vou tentar e se der certo, posto aqui.

Veja preview aqui.

No HTML do seu blog, procure por ]]></b:skin>, acima, cole:

@-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 #caebe6;}

.rattle2:hover {-webkit-animation: rattle2 .3s alternate infinite linear;}

Para aplicar o efeito, cole o seguinte código em um Gadget:

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

*sei que prometi mais utilitários, mas não me aguentei :)

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar