The Moon Reverse ミ✩: Tutorial - Efeito Wolling

22 de abril de 2013

Tutorial - Efeito Wolling

こんにちは Tudo certo? Finalmente criei um efeito decente! Já estava começando a ficar chato para mim, porque muitos de vocês sempre elogiam o quanto algumas coisas minhas são legais, o blog é divo, etc. Para mim o que falta é vergonha na minha cara para criar mais keyframes ou efeitos mais legais, mas adivinhem, eu criei! na verdade eu fiz dois, um com Keyframe e outro apenas feito com uma base comum de CSS. Mas provavelmente ao verem o efeito Wolling, vocês já irão saber qual vai ser o próximo efeito, ahaha. Enfim, espero que gostem e caso usarem creditem com link de redirecionamento para o The Moon Reverse, tudo certo? Até mais, gente...



01. Acima de ]]></b:skin> cole o código abaixo.
@-webkit-keyframes woll{
50% {
transform: rotate(700,deg) ;
-webkit-transform: rotate(100deg) ;
-moz-transform: rotate(9deg) ;
-o-transform: rotate(10deg) ;
-ms-transform: rotate(44deg) ;
}
75% {
transform: rotate(7deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg) ;
}
100% {
transform: rotate(7deg) ;
-webkit-transform: rotate(7deg) ;
-moz-transform: rotate(7deg) ;
-o-transform: rotate(+44deg) ;
-ms-transform: rotate(+44deg) ; }
}
.woll{
border:1px solid #ccc;
padding: 1px;
-webkit-transition-duration: .50s;
OPACITY: 1;
outline-style: transparent;
}
.woll:hover{
-webkit-animation: woll .5s alternate linear;
OPACITY: 0.7;
outline-style:transparent;
}
02.  Adicione um gadget de html/java e cole o código abaixo, faazendo suas alterações.
<a href="/"><img class="woll" src="SUA IMAGEM" title="TÍTULO" /></a>

textsms      26 comentários

  1. Que efeito diwo *3*
    Mackenzie, posso me tornar uma "friend"? u_u'

    -Cookie Lovers

    ResponderExcluir
    Respostas
    1. *UUU* Obrigada Bia-Chan !
      *OOO* Não me mate por favor, por que seu blog é muito lindo sério, amo layouts nestes estilos, está simples mais com aquele ar de divônico :3
      Pode sim *u*

      Já está nos friends :3

      Excluir
    2. O.O'
      Obrigada Mackenzie >w<
      E você já está nos afiliados <3 (putz, não tenho um nome bonitinho o3o)

      Excluir
    3. *U* De nada Bia ~ :3
      HEUEH' e.e (Não tem ?)

      Excluir
    4. Sim, do tipo "friends", os meus são só...afiliados u-u' AHSUAHS'

      Excluir
  2. PARA TUUUDO, que efeito divo e lindo é esse mack? <3 Vou usar no layout que eu estou fazendo para as divulgações O3O Estava precisando de um diferente para as divulgações mesmo rs :3

    http://zombie-of-html.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. HEUEHE' Escrevi tudo errado XD
      Vai usar ? *OOO* Obrigada sua linda ~
      É bom saber que ficou legal !

      Excluir
  3. Tipo assim, esse blog é o melhor de todos EVER, teus layouts sãode encher os olhos. Seus conteúdos são excelentes e mais uma tonelada de elogios.
    Você merece mais que 5000 seguidores, aqui é fantástico. Asumo, Sou fã do The Moon Reverse.

    Tá bom, agora você deve me achar um louco retardado (talvez eu seja), por aparecer aqui do nada e começar a falar esse montão de coisas, mas é apenas a verdade.
    Eu acompanho sim alguns posts mais não tenho o costume de comentar, então guardei tudo para agora rsrsrsrs, o The Moon Reverse já está na minha lista de preferitos.
    Apenas

    E o efeito é fantastico, demoraria muito tempo para conseguir fazer algo parecido, rsrsrs, sou péssimo em keyframes.
    Enfim é só, bye bye

    ResponderExcluir
    Respostas
    1. Cara tipo assim, fiquei uns três minutos ou mais apreciando este texto, nem sei como agardecer, OMG *UUUUUU*
      Sabe, aquela sensação de que você fica muita feliz por um comentário grande cheio de elogios assim, é realmente de ficar sem saber o que fazer :3333
      Agora então, tenho fã, obrigada meeeesmo Byel !

      HEUEHS' Não você não é louco, acho que todos fazem isso a um determinado momento na vida, e obrigada novamente, sério, seu comentário foi muuuito construtivo <33

      Excluir
  4. Ah que lindo, irei usar u_u' Colocarei seus créditos. :3 - obvio né Letiça? e_e
    E sobre o keyframes, eles dão uma possibilidade maior de personalização dos efeitos, acho isso muito legal, embora não use muito isso. UEHUEHE' -q

    ResponderExcluir
    Respostas
    1. *OOOO* Obrigada ~
      HEUEHS ' Olha lá Letiça ;-;
      E.E Não usa ? Se usae um dia então é di..vás..tidade para todo lado :33 KK'
      -qq sério. *u*

      Excluir
  5. Nha que lindo Mack *-* Queria saber mexer com essa tipo de coisa, só que 5 anos fora da blogsfera me deixaram meio por fora dos códigos novos -q Ficou bom e original *-* Concordo contigo, aqueles efeitos de tumblr já enjoaram x-x Tu não devia deixar reblogar não :x sou bem contra isso sabe,.cada blog posta o que sabe e o que é da autoria da pessoa... Mas a maioria dos blogs fazem isso né ...

    kissu :*

    ResponderExcluir
    Respostas
    1. Ah, mais uma coisinha e.e Gostaria de se afiliar ao Iced Tea? Se não quiser não tenha medo de me dizer "não " ok? Espero sá resposta lá *-*

      Excluir
    2. *OOO* Obrigada Sasaki *u*
      Etcha, HEUEH' cinco anos ? Ah, sério, é a mesma coisa que falei para a Sagwa, ambos blogs são lindos e super adimirados pela sua super personalização em HTML, se consequisse seria bem melhor que eu Sasaki, ao menos eu creio HEUE', e sim, uso ainda alguns efeitos, mas não é tudo a mesma coisa de antes sabe.

      *O* Afiliação, sim, eu adoraria demais Sasaki :3
      Já colocarei lá.

      Excluir
  6. Cadê meu comentário demônio? 'ooo'
    Enfim, escrevo de novo e-e'

    Eu que sou preguiçosa UAHSUHAS' Nem coragem pra aprender Keyframes eu tenho, mas na quarta eu tento-qq UHASHAS'
    O efeito ficou lindo *uuuuuuuuuuuuuuuuuuuuu*
    To babando por ele TuT
    Acho que vou usar =D

    ResponderExcluir
    Respostas
    1. *UUU* HEUEHE' Detesto quando isto acontece comigo, meu Deus ;--;
      Somos duas em dois aspectos preguiçosos então KK'
      *O* Ficaria feliz se usasse, saiba que também amo demais os seus efeitos :3

      Excluir
    2. ASHUUAHSHSU'
      Eu estou testando aqui, mas as keyframes não funcionam, nem outros efeitos de keyframes o que será? TuT

      Excluir
    3. HEUEHSUEH' TuT, poxa vida, também não faço ideia.
      Que tutorial está seguindo ?

      Excluir
  7. Nossa,muito legal esse efeito...
    parabéns,Mack!!!
    Hoje em dia está cada vez mais difícil pessoas que querem pensar por conta própria ao invés de sair reblogando efeitos...a consequência disso é que cada vez mais os blogs vão se tornando uniformes e cansativos...
    è bom ter algo diferente de vez enquando
    Beijus~~
    www.garotaousada.com

    ResponderExcluir
    Respostas
    1. *U* Muito obrigada ~
      Concordo, está tudo bem assim como você disse, os blogs de agora se metem nisso, fica cansativo você ver que a coisa toda é apenas relacionada a mesma coisa, os mesmos efeitos do KW, os mesmos tipos de avatares...

      Excluir
  8. Adorei o efeito... >3< todos que você posta são perfeitos

    ResponderExcluir

O blog não é mais atualizado com novas postagens. Mas fique à vontade para perguntar algo do seu interesse, seja relacionado às postagens ou dúvidas que lhe inquietam, estou algumas vezes entrando no blog e certamente verei se tiver comentários pendentes. Obrigada pela visita, leitor!

Este blog não é mais atualizado com novas postagens, mas não excluo 100% a probabilidade.