Tutorial - Efeito Cool

Boa noite, leitores.

Então eu estou aprontando um layout novinho para vocês, já vou avisando que vai ser muito diferente deste, pelo menos nas cores, será um coisa mais dark, aguardem, vou deixá-los curiosos até o fim de semana haha, mas queria avisar também que o blog será fechado temporariamente para implantação do novo layout, isso só lá para sexta-feira, okay?

Enfim hoje trouxe um tutorial de um efeito que achei no Gold tumblr, eu mesma já testei em um layout de testes e verifiquei que a adaptação para o blogger deu certinho, mesmo assim qualquer dúvida que surja é só falar pelos comentários.

Live preview

1. Vá em editar HTML e cole acima de ]]></b:skin> o código abaixo:

@-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;}

2.  Quando for usar é só colocar esse código:

<img src="urldaimagem" class="cool">