Efeito giratório ( 2 opções )

Kawaii World!
Hi everybody!
Amanhã é feriado, finalmente, porque eu estou toda queimada e na escola ficam dando tapas no meu rosto ( meu rosto é aonde eu estou mais queimada '-' ). Finalmente as aulas estão acabando, faltam alguns dias. Eu quero mudar logo de sala, porque eu estou nessa sala praticamente a 2 anos seguidos, é que o diretor decidiu colocar os mesmos alunos na mesma sala, só que é lógico que vieram alunos novos de outra escola. Ah, gente, falta só um seguidor pra 100, sério, obrigada mesmo!

Hoje eu decidi postar um efeito, como tem poucos no Blog. São 2 efeitos, você escolhe qual você quer usar. O primeiro é praticamente giratório, o segundo já 'desliza', eu não vou conseguir explicar como eles são, então veja a Preview. Se você pegar, por favor dê créditos ou pelo menos avise que pegou, ok? Vamos ver o tuto *u*


Caso quiser o efeito 1:

Vá em seu HTML, procure por ]]></b:skin> e acima dessa tag, cole:
/* EFEITO GIRATÓRIO POR HELOÍSA */
.girinho {
transition:All 0s ease;
-webkit-transition:All 0.1s ease;
-moz-transition:All 0s ease;
-o-transition:All 0s ease;
transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-webkit-transition-duration: .60s;
}
.girinho:hover{
transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(1px);
Em seguida, cole em um Gadget HTML/JavaScript

<a href="LINK DO BLOG" title="TÍTULO DO BLOG"><img src="LINK DA IMAGEM" class="girinho" /></a>
<a href="LINK DO BLOG" title="TÍTULO DO BLOG"><img src="LINK DA IMAGEM" class="girinho" /></a>
<a href="LINK DO BLOG" title="TÍTULO DO BLOG"><img src="LINK DA IMAGEM" class="girinho" /></a>
Caso quiser o efeito 2:

Vá em seu HTML, procure por ]]></b:skin> e acima dessa tag, cole:
/* EFEITO GIRATÓRIO POR HELOÍSA */
.girinho2 {
transition:All 0s ease;
-webkit-transition:All 0.1s ease;
-moz-transition:All 0s ease;
-o-transition:All 0s ease;
transform: rotate(0deg) scale(0) skew(1deg) translate(15px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(15px);
-webkit-transition-duration: .60s;
}
.girinho2:hover{
transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
-webkit-transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
-moz-transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
-o-transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
-ms-transform: rotate(40deg) scale(1) skew(1deg) translate(1px);
}
E em um Gadget HTML/JavaScript, cole: 

 <a href="LINK DO BLOG" title="TÍTULO DO BLOG"><img src="LINK DA IMAGEM" class="girinho2" /></a>
<a href="LINK DO BLOG" title="TÍTULO DO BLOG"><img src="LINK DA IMAGEM" class="girinho2" /></a>
<a href="LINK DO BLOG" title="TÍTULO DO BLOG"><img src="LINK DA IMAGEM" class="girinho2" /></a>
Obviamente, substitua os trechos 'Título do Blog' 'Link da Imagem' e 'Link do Blog' pelo que pede

43 comentários:

  1. amei esse efeito u.u
    http://seututorialmeututorial.blogspot.com.br/

    ResponderExcluir
  2. Adorei <3
    Cate-land.blogspot.com

    ResponderExcluir
  3. Estou tão animada por amanhã ser feriado >3< Os efeitos são muito fofos, o meu preferido foi o segundo.

    Letícia Evans | Vida de uma SONE

    ResponderExcluir
  4. adorei é bem diferente.....^^ e bem criativo........

    bjos e boa noit.......

    http://louca-por-html.blogspot.com.br/

    ResponderExcluir
  5. Eu já vi o 1°, pois você postou ele em outro blog, só não me lembro qual... Mas enfim, esta muito lindo esse efeito ta bem fofinho, adorei :3

    Entre no mundo das estrelas ☼ - capture stars (...)

    ResponderExcluir
    Respostas
    1. Então, na verdade esse é o efeito Funny, o que eu postei é o Giratório *u* obrigada!

      Excluir
  6. Gosto muito do efeito!♥
    Retribuí?.. volto aqui de novo •
    www.rockteen92.blogspot.com.br

    ResponderExcluir
  7. Nossa ameii mesmo esse efeito no meu layout que vem acho que vou usar...

    Beijinhos.!!!

    ResponderExcluir
  8. Ótimo tutorial *U* vou salvar nos favoritos, PERA, TU É A HELOISA? comoassim? wordeland? to voando kra aushuas To seguindo, se quiser me seguir eu te esperarei lá. [se não for incomodo ç3ç] Beijão minha frô >3

    http://paradise-moon.blogspot.com.br/

    http://paradise-moon.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada *u* O que? Sou o.o SUAHSAUH é que eu mudei, 'Resources 4you' sem mesmo ter resources..aí mudei. 101ª seguidora aaaaaah o// lógico

      Excluir
  9. Efeito lindo, gostei especialmente do segundo *u*

    lovely-monsters.blogspot.com.br

    ResponderExcluir
  10. Bem legal o efeito adorei *u*

    World Of Thel -

    ResponderExcluir
  11. Gostei do efeito, o primeiro é o melhor Haha'
    D-Resources

    ResponderExcluir
  12. Que fofos , gostei dos dois .Talvez eu use no meu próximo layout *w*

    Beijos , Thay <3 || Senhorita Liberdade

    ResponderExcluir
  13. Onw, amei demais os efeitos, muito exclusivo :b

    kkk' sinta inveja: nunca me queimei de sol rçrç, 101 agora, informe-se kkk' ;) ahue'
    Ah poxa, logo hoje que é feriado, vou ter de ir almoçar na casa dos parentes u.u isso é o fim da vida kk'

    Adolescente Nerd // Oficial {}

    ResponderExcluir
    Respostas
    1. Que bom que gostou ♥♥

      Ai que sortuda :o eu vivia me queimando quando era menor ç.ç Pois é,estou muito feliz *uu*.AHUSAUHSAUH eu ia ir na piscina mas não fui :c

      Excluir
  14. aah mto legal o efeito, gostei dos dois :D

    http://stroke-of-insanity.blogspot.com.br/

    ResponderExcluir
  15. Que cutes , gostei principalmente do efeito 2 *w*

    Já te coloquei na minha elite , ok ?

    Beijos >.<
    x Senhorita Liberdade

    ResponderExcluir
  16. Hey, já te coloquei nos afiliados do meu blog *u*

    http://perfectnaiveforever.blogspot.com.br/

    ResponderExcluir
  17. Tapas?! ashuashau
    Amei os dois efeitos, são lindos demais e principalmente o segundo <3

    http://maiira-t.blogspot.com.br/

    ResponderExcluir
  18. Adorei o efeito dois, muito bom <3
    Um beijo
    http://bombasticmusics.blogspot.com

    ResponderExcluir
  19. Que da hora, oew. Espero que consiga muito mais seguidores porque você merece, beijos >3<

    Eloísa do Having Cherry || Aguardo sua visita

    ResponderExcluir
  20. Em breve vou usar *3* e tipo... tapas? coitada de vc ASHAUSHAUSH

    Duda || royaltyoficial.blogspot.com

    ResponderExcluir
  21. Eu preferi o segundo, ficou mais chic u.u

    anainstant.blogspot.com.br

    ResponderExcluir
  22. Que lindo que fica *0* A.M.E.I
    http://cherry-charming.blogspot.com.br/

    ResponderExcluir
  23. Eu tive aula no 'feriado' e-e' Sacanagi -q Meu primo também ficava me dando tapas no ombro quando eu estava queimada e_e é horrível D: Eu amei a segunda opção *u* Não gosto de efeitos que são muito chamativos, mas esse é tão charmoso <3 Talvez eu use algum dia ~

    Kissu :*

    ResponderExcluir
    Respostas
    1. Ai que horror D: Que bom que você me compreende, q. É verdade, eu exagerei um pouco hsuahs obrigada <3

      Excluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!