Tutorial: Efeito Hero

Hey moços e moças :3
Eu estava procurando um tutorial bem legal para mostrar para vocês, e achei, adivinhe onde? 
No One Dí Things, claro.
O efeito serve para elite de afiliados, mas você pode usar para o que você quiser.


Lindo né? Eu adorei!

1- Vá em Editar HTML, Ctrl + F e procure por ]]></b:skin> acima dessa tag cole:
@-webkit-keyframes hero {

50% {transform: rotate(16deg) ;
-webkit-transform: rotate(16deg) ;
-moz-transform: rotate(16deg) ;
-o-transform: rotate(16deg) ;
-ms-transform: rotate(16deg) ;}
75% {transform: rotate(-16deg);
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
-ms-transform: rotate(-16deg) ;}
100% { transform: rotate(0deg) ;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
-ms-transform: rotate(0deg) ; }
}
.hero {display: inline-block; border-radius: 5px; margin: -1px; -webkit-transition-duration: .50s; OPACITY: 0.5; outline-style:dotted;
outline-width:1px;
outline-color: transparent;
outline-offset: -5px;}
.hero:hover { -webkit-animation: hero .5s alternate linear; OPACITY: 1; outline-style:dotted;
outline-width:1px;
outline-color: #fff;
outline-offset: -5px;}
2- Salve. Agora vá em Layout > ADD gadget > HTML/JavaScript e cole o seguinte código:
<a href="LINK-DO-BLOG"><img class="hero" src="LINK-DA-IMAGEM" title="TITULO-DO-BLOG" /></a>

Modifique o que é necessário, salve.
Fácil não? Beijos, Ráh

Nenhum comentário:

Antes de ir comente: