Efeito Vai e volta

Oi pessoal! Estão vivos? Espero que sim. -q. Então, essa semana, pelo menos para mim vai ser a ultima semana de férias, por isso, quero me esforçar com o blog. Quero trazer algumas coisas de html. Bom, se eu conseguir fazer algo legal pelo menos. Trouxe hoje um efeito que no caso, eu acabei de fazer. É o meu primeiro, e está usável. Eu acho. Ah, tenho uma gatinha agora, no próximo post trago uma foto pra vocês > O<. O nome dela é Julia, mais tem o apelido de Julinha :3 Espero que gostem do efeito. O nome é meio tosco, eu sei. UIASHAUIHASUI' Visualizem o efeito aqui (o blog de testes ainda está sendo arrumado). Como podem ver, o efeito é simples, ele vai para a esquerda, e volta. Vamos aprender a colocá-lo?
Cole acima de ]]></b:skin> abaixo. Sem fazer alteração nenhuma.


.vaievolta{

transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(0deg) scale(0.96) skew(0deg) translate(0px);
-webkit-transform: rotate(0deg) scale(0.96) skew(0deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.96) skew(0deg) translate(0px);
-o-transform: rotate(0deg) scale(0.96) skew(0deg) translate(0px);
-ms-transform: rotate(0deg) scale(0.96) skew(0deg) translate(0px);
}
.vaievolta:hover{
transform: rotate(0deg) scale(0.96) skew(0deg) translate(-103px);
-webkit-transform: rotate(0deg) scale(0.96) skew(0deg) translate(-103px);
-moz-transform: rotate(0deg) scale(0.96) skew(0deg) translate(-103px);
-o-transform: rotate(0deg) scale(0.96) skew(0deg) translate(-103px);
-ms-transform: rotate(0deg) scale(0.96) skew(0deg) translate(-103px);
}
Agora, em um gadget de HTML/JavaScript, cole o seguinte código:

<center><a href="LINK" title="TEXTO"><img src="LINK DA IMAGEM" class="vaievolta" /></a><a href="LINK" title="TEXTO"><img src="LINK DA IMAGEM" class="vaievolta" /></a><a href="LINK title="TEXTO"><img src="LINK DA IMAGEM" class="vaievolta" /></a>

Edite somente o que está em maiúsculo. 
Espero que tenham gostado, se usarem comentem e creditem. Tchauzinho >< Até mais tarde! 

2 comentários:

  1. Nossa serio eu acho que eu só tenho mais 3 semanas de ferias que chato *_* , Amei o efeito =)

    ResponderExcluir
  2. Legal, já tinha visto esse efeito em alguns blogs e não tinha ideia de como faziam aquilo haha, adorei *u*

    beijão <33
    guitarrebel.blogspot.pt

    ResponderExcluir

Escreva um comentário! Considerando as seguintes regrinhas:

-Sem palavrões.
-Apenas criticas construtivas.
-Sem brigas.
-Deixe o nome do seu blog para eu visitar, e se eu gostar, comentar.
-Comentários do tipo ~Seguindo, segue de volta~ serão desconsiderados e excluídos.