Tutorial: Efeito Shake

Hey ~

Como vão vocês? Bom, o post de hoje vai ser rápido, vai ser um tutorial de efeito shake nas imagens, é ideal para usar na lista de afiliados, já que é um efeito simples. E o resultado é fofo.Ah,os créditos vão para o CAH.

1.Vá em Editar Html pressione Ctrl+F e pesquise por ]]></b:skin> e, acima disto cole esse código:

@-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 precisa nem mexer no código, é só colar.

2.Adicione um gadget Html/JavaScript e cole o seguinte código:

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

Se quiser adicionar mais imagens é só ir repetindo o código.