Follow Us @soratemplates

quarta-feira, 25 de junho de 2014

Efeito Pulse


Oi. Uma vez usei aqui no blog um efeito obtido com CSS que fazia com que as imagens ficassem 'pulsando', ou aumentando e diminuindo. Conheci esse tutorial no tumblr HTML Luv. Para criar esse efeito, usa-se apenas CSS; pode ser aplicado em qualquer imagem que quiser, como nas de afiliados e parceiros, por exemplo. Pare o mouse na imagem abaixo para ver como fica:



1. Acesse Layout, adicione um Novo Gadget do tipo HTML/JavaScript e cole isso:
 <style>
.pulse{
max-width: 90px; /*largura maxima */
margin:1px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.pulse:hover{
-webkit-animation: smallToBig 300ms alternate infinite ease;
-moz-animation: smallToBig 300ms alternate infinite ease;
}
@-webkit-keyframes smallToBig{from {-webkit-transform: scale(1);}to {-webkit-transform: scale(1.1);}}
@-moz-keyframes smallToBig{from {-moz-transform: scale(1);}to {-moz-transform: scale(1.1);}}
</style>
<center>
<a href="LINK-SE-PREFERIR" target="_blank" title="NOME-DO-LINK"><img class="pulse" src="URL-DA-IMAGEM" /></a></center> 

Edite como preferir, mudando a largura, acrescentando mais imagens, links e tal...depois é só salvar e usar.

3 comentários:

  1. Adorei o efeito. *^*

    Aceita afiliação? Se sim, deixa um recado no meu blog? Beijos.

    http://kpopdream.blogspot.com.br/

    ResponderExcluir
  2. Wow *----* Esse efeito fica super fofinho, vou mesmo usa-lo nos afiliados assim que meu blog conseguir o primeiro!
    http://meu-sonhar-blog.blogspot.com.br/

    ResponderExcluir
  3. Gostei muito o efeito! Publicarei em meu blog. OBS: deixarei os créditos.

    There | Chiclete Funny

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart