Tutorial : Efeito Cavalga

Annyeonghaseyooo !

Desculpem por não ter postado ontem, fui levar a Cristal pra tosar e acabei chegando tarde. Acabei de terminar o blog de previews do ICC, ficou muito bonitinho.

Enfim, hoje vou ensinar e mostrar o efeito cavalga. Achei esse efeito através do blog GNMH (xxx) e também foi por ele que consegui fazer o blog de previews.

Preview ʕ•ᴥ•ʔ

Como colocar o efeito no blog 

Clique em Leia Mais

Primeiramente você vai ir em Modelo - Editar HTML e vai clicar em Ctrl + F.
Depois você vai procurar por ]]></b:skin> e vai colar o código acima de ]]></b:skin>.

Efeito Cavalga 1

@-webkit-keyframes cavalga {0% {-webkit-transform: rotate(-50deg); }25% {-webkit-transform: rotate(3deg); }50% {-webkit-transform: rotate(-4deg); }75% {-webkit-transform: rotate(3deg); }100% {-webkit-transform: rotate(-50deg); }}.cavalga {-webkit-transition: .5s; border-radius: 2px; box-shadow: 1px 1px #fff;border: 2px solid #FFC8D4;}.cavalga:hover {-webkit-animation: cavalga .5s alternate infinite linear;} 

Para usar o efeito em imagens

<img src="IMAGEM" class="cavalga" />

Efeito Cavalga 2

@-webkit-keyframes cavalga2 {0% {-webkit-transform: translatey(1px);}25% {-webkit-transform: rotate(20deg); }50% {-webkit-transform: translatey(-30px);}100% {-webkit-transform: translatey(1px);}}.cavalga2 {-webkit-transition: .5s; border-radius: 2px; box-shadow: 1px 1px #fff;border: 2px solid #FFC8D4;}.cavalga2:hover {-webkit-animation: cavalga2 .5s alternate infinite linear;} 

Para usar o efeito em imagens

<img src="IMAGEM" class="cavalga2" />

Efeito Cavalga 3

@-webkit-keyframes cavalga3 {0% {-webkit-transform: rotate(20deg); }10% {-webkit-transform: translatey(10px);}25% {-webkit-transform: rotate(10deg); }50% {-webkit-transform: rotate(-10deg); }75% {-webkit-transform: rotate(3deg); }100% {-webkit-transform: rotate(20deg); }}.cavalga3 {-webkit-transition: .5s; border-radius: 2px; box-shadow: 1px 1px #fff;border: 2px solid #FFC8D4;}.cavalga3:hover {-webkit-animation: cavalga3 .5s alternate infinite linear;} 

Para usar o efeito em imagens

<img src="IMAGEM" class="cavalga3" />

Annyeong !