Efeitos com Keyframes

Oooi, morangos. ♥ *-*

Desculpem por ter sumido um pouquinho. é que eu estou um pouco triste entende?

minhas aulas começaram e isso é chato e uma tristeza enorme, quero voltar para as férias denovo .-. posso admitir não gosto de estudar , não só gosto 'ODEIO' ESTUDAR.

QUERIA PODER NÃO IR PRA ESCOLA ,mais fazer oquê , não posso fazer mais nada , e também não é por causa disso que eu me afastei daqui não , eu estava arrumando esse layout novo porquê atingi a minha meta de 80 . 

pretendo atingir 100 seguidores (tomara que eu consiga).

me ajude, por favor~Obrigada.-

-Trouxe 5 efeitos muitos lindos , para poderem usar  em imagens de welcome , muita gente usa isso , por exemplo : põe uma imagem no começo e depois escreve um texto falando pra pessoa ser bem-vinda e voltar sempre, então serve pra isso vamos ver?

Visualizem os efeitos clicando aqui. Querem aprender?

depois de ter visualizado os efeitos escolha um desejado que mais gostar.

Efeito Pisca

Primeiro, vá em modelo, editar html e procure por ]]></b:skin, acima dele cole:

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

Não altere nada no código. 

Segundo, vá em layout, adicionar um gadget e cole esse código:

<img src="link da imagem" class="pisca">   

Efeito Jump

Primeiro, vá em modelo, editar html e procure por ]]></b:skin, acima dele cole:

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

Não altere nada no código.

Segundo, vá em layout, adicionar um gadget (html/javascript) e cole esse código:

<img src="link da imagem" class="jump"> 

Efeito Distorce

Primeiro, vá em modelo, editar html e procure por ]]></b:skin, acima dele cole:

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

  Não altere nada no código.

Segundo, vá em layout, adicionar um gadget e cole esse código:

<img src="link da imagem" class="distorce"> 

Efeito Shake

Primeiro, vá em modelo, editar html e procure por ]]></b:skin, acima dele cole:

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

Não altere nada no código.

Segundo, vá em layout, adicionar um gadget e cole esse código:

<img src="link da imagem" class="shake">  

Efeito Shake 2

Primeiro, vá em modelo, editar html e procure por ]]></b:skin, acima dele cole:

@-webkit-keyframes shake2 {0% {-webkit-transform: translatex(5px);}50% {-webkit-transform: translatex(-5px);}100% {-webkit-transform: translatex(5px);}}.shake2 {-webkit-transition: .5s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}.shake2:hover {-webkit-animation: shake2 .5s alternate infinite linear;}

 Não altere nada no código.

Segundo, vá em layout, adicionar um gadget e cole esse código:

<img src="link da imagem" class="shake2">

Agora para por um link nas imagens, adicione isso antes do código da imagem:<a href="LINK" target="_blank"> e isso no final: </a>  

créditos:morango m...