10.2.13

Efeito Spin



Bom dia gente!

Depois de alguns pedidos, eu  trouxe o tutorial do efeito que eu uso na minha elite de afiliados. Ele também foi usado na elite do Layout Free da Boo que postei aqui um tempo atrás. Na época em que eu usei pela primeira vez, peguei do tumblr World Designs , que ainda estava aberto, mas depois ele ficou um tempo em hiatus, abriu de novo e atualmente ele está fechado. As donas decidiram acabar com ele, pois segundo elas haviam cansado do tumblr. 

Assim, peguei o código do meu HTML mesmo, já que o WD foi desativado. Por isso talvez vocês encontrem algumas coisas diferentes, porque sempre que eu uso algum efeito de um blog/tumblr costumo mexer nele. 





Procure por  ]]></b:skin> e acima dessa tag cole:

.spineffect{
max-width:85px;-moz-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
    
.spineffect:hover{
-webkit-animation-name: spin;
    -webkit-animation-duration: 400ms;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes spin {
from {opacity: .99;
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -moz-transform: rotate(0deg);}
    to {opacity: .30; 
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -moz-transform: rotate(360deg);}
}

Não mexa em nada, deixe o código do jeito que está, pois algumas alterações podem comprometer o efeito. Depois adicione um gadget de HTML/Javascript  e nele cole:

<a href="LINK DO BLOG"title="NOME DO BLOG"><img src="LINK DA IMAGEM"   class="spineffect"/></a>

Fiz algumas imagens para vocês usarem junto do efeito:




São todas do mesmo modelo, mas você pode encontrar mais aqui.
Beijos♥


15 comentários:

  1. Awh, adorei o efeito, acho que vou usar no próximo lay.. É as imagens também.. Que perfeição é essa? HSDHAS'

    >> http://barbiemundogirls.blogspot.com.br/

    ResponderExcluir
  2. Amei o efeito,fica bem bonito. E as imagens também são demais! ~Beijos

    http://revolutionstartshere-oficial.blogspot.com.br/

    ResponderExcluir
  3. Nossa, Bárbara, o efeito é muito legal!
    ~brincando de gira-gira com o efeito~
    Beijos.
    ~Upsides Down.

    ResponderExcluir
  4. Esse efeito é super bonito mesmo, existe algumas outras versões do efeito spin também.
    Beijos

    BANGTEEN.BLOGSPOT.COM

    ResponderExcluir
  5. Lindo!
    Eu lembro quando este blog possuia um layout simples da Ariana Grande. Quando olho penso o quanto o ♥CD♥ cresceu. Muito sucesso com o blog!
    Beijinhos, PÊ.
    Meykas.blogspot.com/

    ResponderExcluir
  6. achei bem fofo,lindo, talves eu use no proximo lay meu!
    Amei as cores do seu blog!
    eu sei que é chato mais segue?
    http://sense-wonder.blogspot.com/

    ResponderExcluir
  7. Você ama esse efeito, não, Babi?? Lembro-me dele com aquele lay de Natal *--* Ele é lindo, mesmo! Kisses!

    Ju, do Epílogos e Finais.

    ResponderExcluir
  8. Efeito lindo. Vi o rostinho da Bom no seu avatar e quando entrei no blog 2NE1 na playlist! Haha, estou seguindo com certeza. Adorei seu blog.

    http://worldspanda.blogspot.com.br/

    ResponderExcluir
  9. Que lindo o efeito, vou usar no próximo lay (:

    ~ Amor, eu ainda quero ser a postadora sim, rs. Ainda quer que eu seja ?

    Beijos ;*
    poisonhtml.blogspot.com

    ResponderExcluir
    Respostas
    1. ooi, eu de novo, k.

      Então, o e-mail é poisonhtml@hotmail.com mesmo c:

      Beijos ;*

      Excluir
  10. Adorei o efeito. Fica muito fofo *^*
    Amei o blog. Seguindo aqui

    Kissus
    Mar de Glitter

    ResponderExcluir
  11. Oi, quando sai o resultado de quem mais passou para equipe? Ou só vai ser a Layla :(
    Kissus
    http://baby-bluer.blogspot.com

    ResponderExcluir
  12. Adorei o efeito :3
    Rebloguei com creditos ok?
    http://withoutkawaii.blogspot.com.br/2013/07/efeito-spin.html

    ResponderExcluir
  13. Adorei o efeito! Talvez eu use no próximo layout ^^

    Se puder dar uma passadinha no meu blog, eu iniciei ele hoje e gostaria que você desse uma olhadinha nele ><
    E se gostar, ficaria feliz se seguisse o Otome Dream ^^

    http://otome-dream.blogspot.com.br/

    ResponderExcluir