12/12/2014

Efeito Pulse

Oi. Estou trazendo á vocês um efeito obtido com CSS que faz com que as imagens ficassem 'pulsando', ou aumentando e diminuindo. Conheci esse tutorial no blog Reino Kawaii. 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.

2 comentários: