13 de jan de 2013

Tutorial: Efeito Shake

Tumblr_m8ooyqomrf1raloqmo1_500_large

Oooiii! Tudo bem?

O último post com um tutorial HTML foi de como retirar o link ASSINAR: POSTAGENS ATOM, e isso foi a segunda postagem do LT... Faz quase um mês! Então hoje estou trazendo pra vocês um tutorial Muito fácil e liiiindo de mais! É o efeito shake, para os afiliados. O tutorial eu peguei do blog Kawaii World, então se reblogar, credite! Quem quiser ver uma preview é só clicar aqui.

Quer aprender? Clique em READ MORE!


Let's Go!!

Vá em Editar HTML e aperte CTRL+F ou F3 e procure por ]]></b:skin> Acima dessa tag cole:


@-webkit-keyframes shake {
0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
25% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
50% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);}
75% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
100% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);} 
}
.shake {-webkit-transition: .9s; border-radius: 5px;}
.shake:hover {-webkit-animation: shake .9s alternate ease;}

Não edite nada do código acima!

Depois, é só você colar o código abaixo em um gadget HTML/Java Script. Repita o código para cada imagem.

<a href="URL" title="NOME"><img class="shake" src="URL da IMAGEM" /></a>

Espero que tenham gostado (eu amei!)!!

Beijoos
Duda 

4 comentários:

  1. amei! Estou pensando em usá-lo num novo lay.Beijoos

    caprichosasbr-oficial.blogspot.com.br

    ResponderExcluir
  2. É super demais! Quem sabe depois do meu efeito shine nos afiliados eu coloque esse ;)
    Super lindo!
    eusourebeldeevocebrasil.blogspot.com.br

    ResponderExcluir