02 fevereiro 2013

Efeito Shaking {Exclusivo!}

| |
Quem acha ela linda levanta a mão! \O/ {Se pegar, de créditos!}
~ Heey!

Então, se lembram quando expliquei aquelas coisas sobre KeyFrames e disse que eu começaria a postar meus próprios efeitos com eles? E aqui estou eu cumprindo com o prometido.


O efeito é bem fofinho e, na minha opinião, fica bem melhor na elite de afiliados.

Você já sabe o que fazer, não sabe?



No seu HTML, aperte F3 e procure ]]></b:skin> | Acima cole:

@-webkit-keyframes efeito-shaking-isa {
0% {-webkit-transform: rotate(-5deg); }
25% {-webkit-transform: rotate(4deg); }
50% {-webkit-transform: rotate(-6deg); }
75% {-webkit-transform: rotate(9deg); }
100% {-webkit-transform: rotate(-5deg); }
100% {-webkit-transform: translatey(-10px);}
}
@-moz-keyframes efeito-shaking-isa {
0% {-moz-transform: rotate(-5deg); }
25% {-moz-transform: rotate(4deg); }
50% {-moz-transform: rotate(-6deg); }
75% {-moz-transform: rotate(9deg); }
100% {-moz-transform: rotate(-5deg); }
100% {-moz-transform: translatey(-10px);}
}
@-o-keyframes efeito-shaking-isa {
0% {-moz-transform: rotate(-5deg); }
25% {-moz-transform: rotate(4deg); }
50% {-moz-transform: rotate(-6deg); }
75% {-moz-transform: rotate(9deg); }
100% {-moz-transform: rotate(-5deg); }
100% {-moz-transform: translatey(-10px);}
}
.efeito-shaking-isa {-webkit-transition: .7s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}
.efeito-shaking-isa:hover {-webkit-animation: efeito-shaking-isa .7s alternate infinite linear;} 
border-radius: 5px; são bordas arredondadas


Agora vá em Layout • Adicionar um Gadget • HTML/JavaScript e cole:
<a href="LINK"><img class="efeito-shaking-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-shaking-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-shaking-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-shaking-isa" src="URL DA IMAGEM" /></a>
Faça o que se pede e pronto ^-^ Se repassar, eu quero créditos!

10 comentários:

  1. AAAAAAAANW *-* Que lindo ! Quem
    sabem eu use no próximo layout.

    Kisses :*

    >> Visite : http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
  2. Lindo!quem sabe eu nao uso no proximo lay!amei seu blog,ja passei aqui algumas vezes ,amo thml rsr!
    bjs

    meucupcakedeuvaa.blogspot.com

    ResponderExcluir
  3. Foi você que fez? Nossa, que lindinho! Eu adorei, bem original e ficou bem fofo! Apoio a sua ideia de postar seus cógidos, a maioria é so reblog, reblog...

    Beijos!
    Too Kawaii

    ResponderExcluir
  4. Oi linda,amei esse tutorial e já estou usando no meu blog!!!
    O legal desses efeitos de imagem é que dá para usar nas imagens do post,vc é muito fera nos efeitos.e esse é muito legal e achei superfácil de colocar!Espero que vc continue colocando esses efeitos legais!!!
    Sckitty World

    ResponderExcluir
  5. Gostei do efeito, lindo. Também acho que ficar melhor na elite de filiados.

    http://asgarotasdonl.blogspot.com.br/

    ResponderExcluir
  6. Que lindo, você que fez mesmo? Amei *o*
    E o melhor: é fácil de aplicar! >.<
    Beijo ;*
    ill-helpyou.blogspot.com

    ResponderExcluir
  7. Adorei! *u* , Quem sabe uso nos meus afiliados ou no divulgação. u-u bjs s2
    wehearthtml.blogspot.com

    ResponderExcluir

« »