Efeito Cool


Olá meninas . 
Quero saber porquê um menino fica me olhando tanto rsrs '
mais também confesso que gosto dele +/- 
Bom eu mesma sozinha aprendi á passar códigos do tumblr pro blogger 
então eu passei um efeito muito lindo que pode ser usado , em avatares na sidebar e tals vamos começar? primeiro aqui está a 'PREVIEW'


Primeiro vá em Layout > Editar HTML dê CTRL + F
e procure por :

]]></b:skin>
   
Antes de ]]></b:skin> Cole isto :


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

Depois vá em layout e crie um HTML / java script 
e cole isto :

<img src="sua imagem" class="cool">

 Onde está escrito : Sua imagem' cole qualquer imagem que você quiser. 
Créditos se usar ...
Créditos pro tumblr : *

6 comentários:

  1. Como faz essa borda da ilustração,no CS5?

    ResponderExcluir
    Respostas
    1. É fácil , só colocar a ferramenta de bordas e pressionar overlock (overlode)......

      Excluir
  2. Que efeito legal!
    É ótimo para ser usado no Gadget de autoras *-*

    - Cute Memories - Blog Novo

    ResponderExcluir

❤ Ofensas e palavrões serão ignorados e excluidos.
❤ Seguindo, segue de volta?Sim mas fale um pouco do post.
❤Nada de pedir post pelo os comentários , se quiser algo vá na página peça .
❤Se quiser pode deixar a URL do seu blog , sempre vou retribuir a visita!
❤Perguntas/Dúvidas , serão respondidas :-)
❤Se não gostou, não use palavras ofensivas.

« »