27 de jan de 2013

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 :)

4 comentários:

  1. Yooo...
    Olha eu aqui de novo, mais dessa vez queria pedir para que trocasse o link de afiliação, pois mudei o nome do blog é a Url também.

    Nova url: http://wish-otaku.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Mudo sim Thonn, adoro ter você como afiliado *-*

      Excluir
  2. Odeio quando não consigo dormir.
    Adorei o efeito!

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!