Efeito trim trim

Pra quem curtiu a página do blog e viu que ela está meio desatualizada, não se preocupe e não descurta. Ela voltará a funcionar quando atingirmos 50 curtidas. Logo, pra comemorar, iremos fazer uma gincana valendo alguma coisa aí haha'

Gente, estou demorando a postar não por falta de tempo, mas é porque estou terminando o layout free ♥
Yoo ~
Estou acabando de comer um delicioso creme de chocolate OVOMALTINE (morram de inveja) e estava pensando em trazer mais um efeito. Eu quero ver aquela página de Goodies lotada de tutoriais, porque eu estou gostando de trazer efeitos, dicas e menus pra vocês. 
Gente eu queria divulgar um blog que também é de tutoriais e tem um layout muito fofinho, é o Sweet Teens, eu adorei e a dona é super simpática. Eu recomendo!
Agora, foi uma dificuldade pra eu fazer essa postagem, pois a minha net está um horror, não queria abrir nem o facebook. Eu trouxe pra vocês um efeito muito útil para moderadores e afiliados, é o efeito trim trim. Eu fiz ele ficar mais rápido um pouco, estava muito lento.
Like preview: [www]
Créditos: [www]
Vá no editor de html e depois de <b:skin> cole esse código:

@-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; }

Salve. Eu aconselho a não mexer em nada, apenas nos styles mesmo.
Depois adicione um gadget de HtmlJavaScript e cole:

<img src="http://media.tumblr.com/1d0090abd28f60c44eb659f0f3d26704/tumblr_inline_mj91nseBAp1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/8ad5d72ba43a801e370f4757d5b69289/tumblr_inline_mi0z8tQFwz1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/e099eab1dacd8af0439b5d2c2a24dff8/tumblr_inline_misv46qXcz1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/37644c2e48097f3c98ed2151381ec971/tumblr_inline_mi0yiiRccy1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/688a535ba12868de0eea7ce3256b0c23/tumblr_inline_mhxjeaqzel1qz4rgp.png" width="100" align="left" class="vai">

Você pode colocar ou retirar quantas quiser e colocar a imagem de sua preferência.
Bom, esse foi o efeito, gostaram?
Kiss

5 comentários:

  1. Adorei esse efeito! Cara, estou desejando agora seu creme de chocolate.. ainda mais de ovomaltine *Ç* você acabou de acabar com minha dieta Ç.Ç

    Seguindo seu blog.

    xoxo
    Visita?
    http://radioactive-pandas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. kkkkkk' obrigada. É simplesmente viciante esse creme u.u
      haha, obrigada por seguir, vou retribuir :D

      Excluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ