Tutorial - Efeito trim trim

|| ||
Como vão vocês minna-san? Bom, eu trouxe mais tutoriais hoje, na verdade eu estava pensando em fazer uma maratona de tutoriais. Vai ser 2 dias postando tutoriais sem parar. Depois de amanhã, porque amanhã não irá dar. Vou pro ginecologista.
Bom, eu tinha dito para a Mandy-chan que eu iria algum dia reblogar algum tutorial dela, então estou cumprindo minha promessa, até porque os efeitos dela são demais. Eu já tentei fazer alguns efeitos só que descartei, foi tão lixo que odiei >////< Bom, os créditos vão para Mandy-chan de With You. Ahh e sobre os postadores nenhum ainda aceitaram meu convite, depois eu reclamo para eles direitinho o3o Leia mais para aprender os efeitos.
 
1. Vá até seu HTML, procure por ]]></b:skin> e cole acima:
@-webkit-keyframes vai { 0% { transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-webkit-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(0deg) scale(0) skew(0deg) translate(0px); }
25% {transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);}
50% {transform: rotate(7deg) scale(0.964) skew(0deg) translate(-2px);
-webkit-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);}
75% {transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);}
100% { transform: rotate(0deg) scale(-1) skew(0deg) translate(0px);-webkit-transform: rotate(0deg) scale(-1) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);-ms-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);}}
.vai {border-radius: 5px; border:1px double #f5f5f5; margin:1px;cursor:pointer;}
.vai:hover {-webkit-animation: vai 1.3s alternate infinite linear;border-radius:2px;-webkit-transition: -webkit-transform 1s ease-in-out; }

 
2. Agora cole em um gadget HTML/Javascript:
<imgsrc="LINKDAIMAGEMAQUI" width="100" align="left" class="vai">
<imgsrc="LINKDAIMAGEMAQUI" width="100" align="left" class="vai">
<imgsrc="LINKDAIMAGEMAQUI" width="100" align="left" class="vai">
<imgsrc="LINKDAIMAGEMAQUI" width="100" align="left" class="vai">

6 comentários:

  1. Eu acho lindo esse efeito, muito fofinho.... Espera, agora que eu percebi que você usou um tutorial meu *O* OMG, muito obrigada sua fofaa <3
    Kiss
    with-you-s2.blogspot.com

    ResponderExcluir
    Respostas
    1. claro amor u3u
      Disse que um dia eu ainda ia reblogar -q hahaha'
      -kissus-

      Excluir
  2. Acho que será legal, amo tutoriais, sem falar que a cada um que vemos, os códigos parece fixar em nossas mentes, sei lá. Eu, infelizmente tenho uma reclamação! A live Preview não está prestando, pois quando clico vai para o blogger.com. Então, nem deu para eu ver...TT^TT. Chu ~.

    - Prince Otaku

    ResponderExcluir
  3. Deve ser lindo oo efeito, mas eu não consegui ver na live preview ç.ç
    Pequena Garota

    ResponderExcluir

- Requests tem de ser feito na minha Ask, mas não me importo de serem feitos pelos comentários.

- Não façam comentários merdosos, ex: Poha, lindo, vai te fuder, ou seja, os sem lógicas! Mas eu permitos gírias.

- Se quiser que eu retríbua é só pedir, deixando o link do seu blog!

- Aceito "seguindo, segue de volta?", não acho nada errado nisso!

- Eu leio e respondo todos os comentários possíveis!