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.

Preview

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