Oi amores, tudo beleza? Não teve post ontem porque eu estava estudando, e acreditem, estudei até as 2:30 da madrugs. Passei no vestibular \o/ 5 lugar em Biomedicina mas eu nem vou fazer :s não é esse curso que eu quero, mas, o importante é que passei. Minha férias começaram hoje, haha, finalmente mas são só 2 semaninhas, mas dá pra descansar né. Esse tempo que entrei pouco na internet até desanimei mas vou recuperar o pique. Vou responder uma parte dos comentários e depois respondo o resto."Mais Informações"
Só funciona em Chrome e Safari.
Coloque esse código depois de <style> e não muda nada nele.
@-webkit-keyframes rotation {
0% {transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
10% {transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg);}
20% {transform: rotate(175deg); -webkit-transform: rotate(175deg); -moz-transform: rotate(1755deg); -o-transform: rotate(175deg); -ms-transform: rotate(175deg);}
30% {transform: rotate(185deg); -webkit-transform: rotate(185deg); -moz-transform: rotate(185deg); -o-transform: rotate(185deg); -ms-transform: rotate(185deg);}
40% {transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg);}
50% {transform: rotate(-144deg); -webkit-transform: rotate(-144deg); -moz-transform: rotate(-144deg); -o-transform: rotate(-144deg); -ms-transform: rotate(-144deg);}
60% {transform: rotate(-108deg); -webkit-transform: rotate(-108deg); -moz-transform: rotate(-108deg); -o-transform: rotate(-108deg); -ms-transform: rotate(-108deg);}
70% {transform: rotate(-72deg); -webkit-transform: rotate(-72deg); -moz-transform: rotate(-72deg); -o-transform: rotate(-72deg); -ms-transform: rotate(-72deg);}
80% {transform: rotate(-36deg); -webkit-transform: rotate(-36deg); -moz-transform: rotate(-36deg); -o-transform: rotate(-36deg); -ms-transform: rotate(-36deg);}
90% {transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg);}
100% {transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg);}
}
.rotation {-webkit-transition: .9s; border-radius: 5px; margin-left: 5px;}
.rotation:hover {-webkit-animation: rotation .9s alternate ease;}
Coloque esse código onde for usar.
<img src="link da imagem" class="rotation" />
Parabéns, Brenda!
ResponderExcluirÉ uma boa experiência pra você e boa sorte nos estudos.
O efeito já conheço mas a maioria do público do meu blog utiliza Mozilla, é uma pena que não dê...
Bjs
recantodafadaalice.blogspot.com.br/