26 de setembro de 2013

Tutorial- Efeito Bate-Bate

Trouxe mais um efeito para afiliados, ele é simples e muito fofo.
Os créditos x
Para colocar em seu blog coloque o código abaixo antes da tag ]]></b:skin>

@-webkit-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
@-moz-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
@-o-keyframes YO {
1% {-webkit-transform: scale(1);}
50% {-webkit-transform: rotate(360deg);}
80% {-webkit-transform:translatey(-10px);}
100% {-webkit-transform: scale(1.8);}
}
.bate-bate{-webkit-transition: .7s; width:40px;
height:40px;border-radius: 5px;}
.bate-bate:hover {-webkit-animation: YO .7s alternate infinite linear;}
.fade:hover img {opacity:0.2;-webkit-transition: .7s;}
.fade img:hover{opacity:1.0;-webkit-transition: .7s;-webkit-filter:contrast(120%);
-moz-filter:contrast(120%);
-o-filter:contrast(120%);
}

Só mude algum código se você souber html.

Para fazer o efeito funcionar coloque o código abaixo no gadget Html/Java Script

<div class="fade"><center>
<a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a>
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a>
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a>
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a>
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a>
< a href="Link" title="Nome"><img class="bate-bate" src="link da imagem" /></a>
</center></div>

Kissus

Nenhum comentário:

Postar um comentário

- Este espaço é todo seu. Tire suas dúvidas!

- Por favor, Não faça algum request pelos comentários,
para isso serve a Ask.

- Se não gostou de algo, não use palavras baixas. Ninguém precisa se rebaixar tanto para expressar uma opinião.

- Leio todos os comentários e retribuo todos.

-Thanks