07 março, 2014

Efeito HeartBeat


Olá galerinha,

Bom hoje eu trouxe mais um efeito para fotos, é fácil também e super lindo, bom o efeito se chama  HeartBeat eu aprendi a fazer no blog Eu amo HTML, se vocês não conhecem o efeito aqui está uma: 



Vamos então ao tutorial. Primeiro vá em:

Modelo > Editar HTML > E procure por:

]]></b:skin>

Quando achar cole em cima este código:

@-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; é a 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.


Depois Salve e vá em:

Vá em Layout > Adicionar Gadgets > HTML/JavaScript > Cole:

<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>

Pronto modifique onde pede e salve. E se usar dê créditos ao Eu amo HTML e ao Fofuras De Garotas. Beijos e até a próxima. 

 photo novaassinatur_zpsf067b3ff.png

8 comentários :

  1. nunca consigo mexer no html do meu blog :(
    esse efeito e muito lindo
    beijos

    Caprixos Teens

    ResponderExcluir
  2. Que lindo o efeito *o* Vou usar no meu próximo layout =33

    Bjos ~ Poderia retribuir a visita ? Gave Crazy

    ResponderExcluir
    Respostas
    1. Que bom que gostou, se usar não esqueça de creditar. Beijos

      Excluir
  3. Cheguei aqui, através do: http://santaclaraartesanato.blogspot.com.br.
    ja estou de seguindo vou deixar meu blog aqui
    http://nmarcolin.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Já estou seguindo seu blog também. Beijos

      Excluir
  4. Adorei !3♥♥♥♥♥

    http://seaofdreamspink.blogspot.com.br

    ResponderExcluir


- Aceito críticas, mas sem xingamentos;
-Aceito parcerias
- Deixe o endereço do seu blog para que eu possa retribuir;
- Se seguir o blog eu retribuo.
- Volte sempre!