09 março 2013

Efeito Right Or Left

| |
Percebi que algumas previews não pegam mais. Eu vou dar um jeitinho nisso, ok?

Oi gente.
Esses dias eu estava vendo umas postagens do blog e percebi que já faz um tempo que não posto algum efeitos com keyframes então eu resolvi entrar no HTMLedit e brincar de fazer keyframes e deu certo.
Veja o efeito aqui
Para aprender o efeito, já sabe, né?


No HTML do seu blog, aperte F3 e procure por ]]></b:skin> e acima cole:

@-webkit-keyframes efeito-rof-isa {
1% {-webkit-transform: rotate(-9deg); }
25% {-webkit-transform: scale(0.8); }
50% {-webkit-transform: rotate(-5deg); }
75% {-webkit-transform: scale(0.9); }
90% {-webkit-transform: rotate(7deg); }
100% {-webkit-transform: rotate(10deg); }
}
@-moz-keyframes efeito-rof-isa {
1% {-moz-transform: rotate(-9deg); }
25% {-moz-transform: scale(0.8); }
50% {-moz-transform: rotate(-5deg); }
75% {-moz-transform: scale(0.9); }
90% {-moz-transform: rotate(7deg); }
100% {-moz-transform: rotate(10deg); }
}
@-o-keyframes efeito-rof-isa {
1% {-o-transform: rotate(-9deg); }
25% {-o-transform: scale(0.8); }
50% {-o-transform: rotate(-5deg); }
75% {-o-transform: scale(0.9); }
90% {-o-transform: rotate(7deg); }
100% {-o-transform: rotate(10deg); }
}
.efeito-rof-isa {-webkit-transition: .6s; border-radius: BORDAS ARREDONDADASpx; box-shadow: 1px 1px #caebe6;}
.efeito-rof-isa:hover {-webkit-animation: efeito-rof-isa .6s alternate infinite linear;}
Mude apenas o que se pede. Depois visualize e, se estiver tudo bem, salve.


Depois de salvar, vá em Layout • Adicionar Gadgets • HTML/JavaScript e cole:
<a href="LINK"><img class="efeito-rof-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-rof-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-rof-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-rof-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-rof-isa" src="URL DA IMAGEM" /></a> 
Mude o que se pede e salve.


Espero que tenham gostado do efeito, fiz com muito carinho. Lembrem-se: repassar só com créditos e usar também.


Eu queria pedir algo, amores. Eu enjoei deste layout já faz um tempo ou seja, eu estou louca para trocar o layout mas adivinha? A inspiração foi e não quer voltar.
Eu quero sugestões para  layouts, eu estou ficando desesperada. Toda vez que entro no blog me dá aquela agonia, sabe? Obrigada desde já ^-^

Beijos ;*

13 comentários:

  1. Amei esse efeito,sobre o layout que tal rosinha com laranja bem clarinho e branco e vc pode usar um personagem tema,sei lá;

    Sckitty World

    ResponderExcluir
  2. Que show esse efeito! Amei, vou fazer no próximo lay .

    nosnocomputador.blogspot.com

    ResponderExcluir
  3. Adorei o efeito fofa *OOOOO*

    eu tambem estou zero em inspiração, desculpa se não ajudaria no tema do layout :/

    Nyah Kawaii

    ResponderExcluir
  4. Muito legal o efeito !
    cr4zy-world.blogspot.com

    ResponderExcluir
  5. *u* Que lindo <3
    Faz da Katy Perry, azul. Tive a ideia ao ver o preview. Estranho né?
    Ana~ vocejasaben-e

    ResponderExcluir
  6. Adorei o efeito!
    http://larleh.blogspot.com.br/

    ResponderExcluir
  7. Ah, eu já tinha visto esse feito, simplesmente lindérrimo né X) ótimo tutorial!

    Adolescente Nerd

    ResponderExcluir
  8. Legal o efeito, criei um efeito com keyframes com o mesmo ome, keyframes sã legais de brincar, depende da criatividade.

    ResponderExcluir
  9. Lindo esse efeito, Isa! Eu juro que eu usaria se não utilizasse só a janelinha popup! Adorei o layout, viu? As cores são muito bonitas! E desculpa a demora para passar aqui, eu estava fazendo o novo tema do TK.

    Beijos!
    Too Kawaii

    ResponderExcluir
  10. Que lindo esse efeito :3
    Não sei se você já ensinou, e desculpa pedir caso já tenha esse tuto, rs. Então, ensina a usar keyframes?

    Poison HTML

    ResponderExcluir
  11. Esse efeito é bem bonito, achei fofinho. Parece que a imagem está dançando ou pulando (tipo quando somos menores e queremos alcançar o teto).
    ~Ana@TSD

    ResponderExcluir
  12. Oi flor, quero te pedir um favor, como você pôs estes "quadrados" na imagem?

    ResponderExcluir

« »