In Tutoriais

Efeito Shake, shake, shake it!

Olá! Como vocês estão? Hoje vou mostrar como aplicar um efeito animadinho com css e html; com ele a imagem, texto ou que você achar legal adicionar, fica se movimentando sozinha, assim:

Shake, shake, shake, shake, shake it...

É feito em dois passos...

1.Adicione esse código ANTES de ]]></b:skin>
 .shake{
-webkit-animation: shake 1000ms alternate infinite linear;
-moz-animation: shake 1000ms alternate infinite linear;
}
@-moz-keyframes shake /* Firefox*/
{
{ -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -moz-transform:  translate(0px, 2px) rotate(0deg); }
 40% { -moz-transform:  translate(1px, -1px) rotate(1deg); }
 50% { -moz-transform:  translate(-1px, 2px) rotate(-1deg); }
 60% { -moz-transform:  translate(-3px, 1px) rotate(0deg); }
 70% { -moz-transform:  translate(2px, 1px) rotate(-1deg); }
 80% { -moz-transform:  translate(-1px, -1px) rotate(1deg); }
 90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
 100% { -moz-transform:  translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake /* IE9*/
{
10% { -ms-transform:: translate(-1px, -2px) rotate(-1deg); }
 20% { -ms-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -ms-transform: translate(0px, 2px) rotate(0deg); }
 40% { -ms-transform: translate(1px, -1px) rotate(1deg); }
 50% { -ms-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -ms-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -ms-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -ms-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -ms-transform: translate(2px, 2px) rotate(0deg); }
 100% { -ms-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake /* Safari and Chrome */
{
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
} 

Note que 1000ms se refere à velocidade; se o número for mais alto, fica mais lento; e você pode adicionar mais estilos dentro de .shake{css aqui, como background, cores de texto, sombras, bordas} antes de keyframes. Exemplo:

.shake{
-webkit-animation: shake 1000ms alternate infinite linear;
-moz-animation: shake 1000ms alternate infinite linear;
background: #CÓDIGO DA COR;
box-shadow: 2px 3px 4px #COR;
border-radius: 20px;
border: 2px dotted #COR;
}

2. Visualize seu template para ver se nada mudou e salve. Para que o efeito funcione, você deve especificar onde desejar usar, criando uma <div class="shake">CONTEÚDO</div> ou no caso de imagem, acrescentando class="shake", assim:

<div class="shake">
<img class="shake" src="URL DA IMAGEM"/>
TEXTO...
</div> 
E pronto! Fácil neh ^-^...me lembrou aquela música do Metro Station Shake it
Shake It by Metro Station on Grooveshark
Espero que gostem e beijinhus...

Related Articles

10 comentários:

  1. nuss *c* Adorei o efeito esta no seu blog ne? Lindo ele e muito pratico ><
    BJS.<3
    http://souotomeecomorgullhoo.blogspot.com.br/

    ResponderExcluir
  2. Eeei Rô, gostaria de agradecer a ajuda no meu blog. Estou fazendo alguns testes aqui, vou ver se da certo com aquele código que você me falou... muito obrigado!

    Meu templante é bem chato, tudo que eu coloco da problema rs.. mais faz parte né?

    Adorei o seu post.. fica bem bonitinho esse efeito! Muito bom!!

    Beijos e obrigada mais uma vez... uma ótima semana para você!

    ResponderExcluir
  3. Adorei o tuto flor!
    Fica muito legal esse efeito em imagens, e usando a criatividade dá pra fazer muita coisa!!

    bjãoo

    ResponderExcluir
  4. Nakashita: Que bom que gostou ^^ Na verdade, não uso nesse modelo, mas tô pretendendo :3
    Dayanne: Vou torcer para dar certinho ^^ Ótima semana para você também :D
    Gizaa: Vi sendo usado até em blockquote e ficou lindinho ^^
    Obrigada e beijus a todas <3

    ResponderExcluir
  5. Olá, Roberta ^-^
    Eu amo o seu bloguinho, além de ser super fofo e lindo, está sempre me ajudando com o meu *-*
    Da uma passadinha lá, rs: http://otomeskawaii.blogspot.com.br

    xoxo♥~

    ResponderExcluir
    Respostas
    1. Ai que bom! Isso me deixa super feliz ^^
      Seja bem vinda sempre e muito obrigada!!
      Beijus...

      Excluir
  6. lol que demais a lhama no começo do post, esse efeito é realmente muuito legal ^^/
    #Kissus♥
    cotidianodeumabarbie.blogspot.com

    ResponderExcluir
  7. adorei a dica muito legal!!! vou tentar isso em algumas das minhas fotos!!!

    meu blog que ta rolando sorteio, compartilha se puder!!

    bj

    Leandra - www.cherryboomshop.com

    ResponderExcluir
  8. Olá, mais uma vez atrapalhada com os códigos... esse último, para que o efeito funcione onde a gente quer, pode ser colocado no HTML da postage, para apenas uma imagem ficar assim?!

    ResponderExcluir
    Respostas
    1. Pode ^^ Só deixar apenas a linha com a class que diz
      ...img class='shake' src="url da imagem"/...
      Ou não acrescentar o texto na parte indicada no código :3
      Beijinhus...

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart