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! ♥
Efeito muito lindo *o*
ResponderExcluirDiamante Negro
Então!! ^^
Excluir