~Boa tarde!
Tudo bem??
Hoje eu trouxe para vocês um tuto muito legal, que é como colocar os efeitos com keyframes nas imagens, igual ao que eu uso nas imagens dos posts!
Para quem não entendeu, passe o mouse na imagem do começo do post.
Viram?! Ela treme *--*
Vamos aprender a fazer??
Créditos ao We Heart HTML pelo tutorial
Vá em modelo >> Personalizar >> Avançado >> CSS
Cole este código:
@-webkit-keyframes jump {
0% {-webkit-transform: translatey(0px);}
50% {-webkit-transform: translatey(-10px);}
100% {-webkit-transform: translatey(0px);}
}
.jump {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}
.jump:hover {-webkit-animation: jump .5s alternate infinite linear;}
Agora cole este código em um gadget ou no HTML das postagens:
<img src="link da imagem" class="jump">
Substitua a parte "link da imagem" pela URL da imagem desejada
Vá em modelo >> Personalizar >> Avançado >> CSS
Cole este código:
@-webkit-keyframes pisca {
0% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 1;}
}
.pisca {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}
.pisca:hover {-webkit-animation: pisca .7s alternate infinite linear;}
Agora cole este código em um gadget ou no HTML das postagens:
<img src="link da imagem" class="pisca">
Substitua a parte "link da imagem" pela URL da imagem desejada
Vá em modelo >> Personalizar >> Avançado >> CSS
Cole este código:
@-webkit-keyframes distorce {
0% {-webkit-transform: skew(-10deg);}
50% {-webkit-transform: skew(10deg);}
100% {-webkit-transform: skew(-10deg);}
}
.distorce {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}
.distorce:hover {-webkit-animation: distorce 1s alternate infinite linear;}
Agora cole este código em um gadget ou no HTML das postagens:
<img src="link da imagem" class="distorce">
Substitua a parte "link da imagem" pela URL da imagem desejada
Vá em modelo >> Personalizar >> Avançado >> CSS
Cole este código:
@-webkit-keyframes shake {
0% {-webkit-transform: rotate(-1deg); }
25% {-webkit-transform: rotate(3deg); }
50% {-webkit-transform: rotate(-4deg); }
75% {-webkit-transform: rotate(3deg); }
100% {-webkit-transform: rotate(-1deg); }
}
.shake {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}
.shake:hover {-webkit-animation: shake .5s alternate infinite linear;}
Agora cole este código em um gadget ou no HTML das postagens:
<img src="link da imagem" class="shake">
Substitua a parte "link da imagem" pela URL da imagem desejada
Vá em modelo >> Personalizar >> Avançado >> CSS
Cole este código:
@-webkit-keyframes shake {
0% {-webkit-transform: rotate(-1deg); }
25% {-webkit-transform: rotate(3deg); }
50% {-webkit-transform: rotate(-4deg); }
75% {-webkit-transform: rotate(3deg); }
100% {-webkit-transform: rotate(-1deg); }
}
.shake {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}
.shake:hover {-webkit-animation: shake .5s alternate infinite linear;}
Agora cole este código em um gadget ou no HTML das postagens:
<img src="link da imagem" class="shake2">
Substitua a parte "link da imagem" pela URL da imagem desejada
E aí... Gostaram do tuto??
Usaram o efeito??
Comentem!!
Kissus~
Talvez eu use no Próximo Layout do Winter Rose...
ResponderExcluirNossa, Esse Gif ai meio '' Arco-Íris '' deu mó LAG no meu Cérebro @-@
winter--rose.blogspot.com.br/
Hahahahaha!! LAG no cérebro... Nunca aconteceu comigo!! rs'
ResponderExcluirÉ bem legal mesmo usar esses efeitos!!
Beijos!!