21 de jun de 2013

Tutorial: Efeito Marquee & HeartBeat (Exclusivo!!)

Fiz um novo blog *w* Pode seguir? www.segredosde-uma-garota.blogspot.com -Obg.


Oii *u* 
Hoje eu, a Helo, a Isa e a Ana (e mais a classe todas rs) tavamos na aula de artes, aih, a Helo viu um gato na sacado do prédio em frente da escola e a Ana falou que era uma sacola. E quando fui ver, ele se mexeu e falamos: "É.. uma sacola kkkk". E quando fui ver, a porta da sacada tava aberta, e tava passando um clipe do The Hangover Part III. kkkk Pura conhcidencia *w* PS: Todas são as minhas amigas ~Foto 
Trouxe um tutorial bem legal, e é muito pouco conhecido, então vocês não devem conhece-lo
Ele se chama Efeito Marquee & HeartBeat, e você pode dar uma olhadinha nele, indo aqui. Dando créditos ao: Eu amo HTML pelo tutorial ;) Leia mais para seguir com o tuto
1°- Cole esse código em uma gadget HTML/JavaScript:
<marquee behavior="alternate" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="6">
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
<a href="LINK"><img class="efeito-heartbeat-isa" src="URL DA IMAGEM" /></a>
</marquee>
                                                                                                     
Faça o que o código pede. O número 6 em negrito é a velocidade(=^-^=)

Agora procure por ]]></b:skin> e quando achar, cole logo a cima:

@-webkit-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-moz-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
@-o-keyframes efeito-heartbeat-isa {
1% {-webkit-transform: scale(0.8);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(1.1);}
}
.efeito-heartbeat-isa {-webkit-transition: .5s; border:solid 2px #E42D8A;border-radius: 10px; box-shadow: 1px 1px #caebe6;}
.efeito-heartbeat-isa:hover {-webkit-animation: efeito-heartbeat-isa .5s alternate infinite linear; border:solid 2px #DC1B7A;}

border: solid 2px #E42D8A; é o tipo de borda, a grossura e a cor da borda. Se não quiser apague.
border-radius: 10px; borda arredondadas
border:solid 2px #DC1B7A; é a borda, a grossura e a cor quando passa o mouse por cima. Apague se não quiser.

Prontinho!! Gostaram? Fico por aqui!
Bjs

13 comentários:

  1. Eu ainda quero ver The Hangover III, eu choro de rir com o 1 e o 2. Esse efeito é uma gracinha, a Isa realmente posta efeitos muito bons!

    Beijos
    Too kawaii

    ResponderExcluir
    Respostas
    1. Assista! Você não vai se arrepender kk *u*
      Concordo!! '-' -Bjs

      Excluir
  2. Obrigada por ter dado os créditos ^-^ A combinação ficou bem legal ;)

    ResponderExcluir
  3. Que legal esse tutorial!
    Larissa, quero dizer que agora o Sapatinho de Cristal está novo :D
    Vc e a Diane podem postar quando quiserem ok?
    Qualquer coisa fale comigo ou com ela
    Beijos
    Fiquem Com Deus!!!!
    =D
    http://blog-sapatinho-de-cristal.blogspot.com.br/

    ResponderExcluir
  4. Me desculpe a demora para retribuir o comentário, fiquei um tempo afastada mas agora o blog voltou com tudo! Adorei o post,muito bom o tutorial! Beijoos :)
    ~~ candyteen-official.blogspot.com

    ResponderExcluir
  5. Que legal, deve ser lindo *-*

    @ building--stars.blogspot.com.br ♥

    ResponderExcluir
  6. adooreii esse efeitoo o/ parece com um que eu uso la no blog o/
    acervo-de-livros.blogspot.com

    ResponderExcluir

Olá amorinha blogueira! Como vai você?
Obrigada por comentar neste bloguito! Ah mas nós temos regrinhas viu ●ω●
- Não xingue ninguém;
- não copie o post;
- não comente no post antes de ler ou só comente "Que legal! Seguindo... segue de volta!", eu sigo mas não venha só comentar isso tá, quero saber a sua opinião amora;

É isso, sintam-se à vontade de falar mas sigam as regras :D
Beijos!

Expresse os seus sentimento!

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙