Efeito Cool ( para afiliados, ilustrações, etc... )

Oi oi!

Trouxe um efeito bem legalzinho que vale a pena usar em elite de afiliados, ilustrações e outras coisas que deseja. Veja a preview dele aqui. Gostaram? Então, siga com o tutorial:

→ Vá em seu HTML e procure (F3) por  ]] . Acima dessa tag cole o enorme código:

@-webkit-keyframes cool {

0% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);}

12% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}

25% {transform: rotate(18deg) translate(18px); -webkit-transform: rotate(18deg) translate(18px); -moz-transform: rotate(18deg) translate(18px); -o-transform: rotate(18deg) translate(18px); -ms-transform: rotate(18deg) translate(18px);}

50% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}

75% {transform: rotate(18deg) translate(18px); -webkit-transform: rotate(18deg) translate(18px); -moz-transform: rotate(18deg) translate(18px); -o-transform: rotate(18deg) translate(18px); -ms-transform: rotate(18deg) translate(18px);}

87% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}

100% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);}  

}

.cool {-webkit-transition: .9s; border-radius: 5px;}

.cool:hover {-webkit-animation: cool .9s alternate ease;}

Não altere nada, Depois, vá em seu Layout e crie um gadget HTML/JavaScript e nele cole esse mini código:

<img src="sua imagem" class="cool">

Simples, não é?!

Lembrando que os créditos vão para o blog Teen Bomb's.

Até mais, pessoal! ♥