14 de abr de 2013

Tutorial - Efeito Gild

Oi Oi Gente!
Vou me desculpar aqui por não ter postado nem na sexta e nem ontem só que são sempre os mesmos motivos e eu não tive tempo, então vou postar logo agora cedo e depois fazer as atividades!
Eu encontrei esse efeito bem fofo lá no We Heart HTML (créditos) e é ótimo para afiliados espero que gostem!  Preview.
Primeiro, vá em Modelo > Editar HTML > Ctrl + F ou F3 e procure por ]]></b:skin> e acima cole:
@-webkit-keyframes gild {
50% {transform: rotate(10deg) scale(0.636);
-webkit-transform: rotate(10deg) scale(0.636);
-moz-transform: rotate(10deg) scale(0.636);
-o-transform: rotate(10deg) scale(0.636);
-ms-transform: rotate(10deg) scale(0.636)}
75% {transform: rotate(-10deg) scale(0.636);
-webkit-transform: rotate(10deg) scale(0.636);
-moz-transform: rotate(-10deg) scale(0.636);
-o-transform: rotate(-10deg) scale(0.636);
-ms-transform: rotate(-10deg) scale(0.636);}
99% { opacity: 0.0;}
100% {-webkit-transform: rotate(0deg); opacity: 1;}
}
.gild {display: inline-block; border-radius: 5px;}
.gild:hover { -webkit-animation: gild .5s alternate linear;}
Você não muda nada, e agora, cole em um gadget HTML/JavaScript esse código:


<a href="LINK"><img src="LINK DA IMAGEM" class="gild"></a>

4 comentários:

  1. Que legal! Estou usando este efeito!

    Beijos, Carol!
    http://controversias-blog.blogspot.com.br/

    ResponderExcluir
  2. Muito bacana o efeito =D

    Beijos

    ResponderExcluir


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?