All for Joomla All for Webmasters

Imagem com efeito shake

A imagem vai ficar com este efeito:

Você também vai aprender no tutorial a como utilizar quando o efeito apenas para hover.

1. Primeiro, cole o código abaixo antes de </head> no seu código HTML.

<link href="http://sugar-dance.org/shake.css" rel="stylesheet" type="text/css">

2. Depois, cole o código abaixo no seu CSS.

.shake {
-webkit-animation: shake 1500ms alternate infinite linear;
-moz-animation: shake 1500ms alternate infinite linear;
}

1500 é o tempo em milisegundos e pode ser alterado. Quanto maior for o número, mais rápido é a velocidade em que a imagem vai se mover.

3. E para utilizar na imagem que você deseja, é só utilizar o código:

<img src="http://link_da_imagem.com" class="shake">

EFEITO HOVER

Para isso, é só alterar o CSS para isso:

.shake {
-webkit-animation: none;
-moz-animation: none;
}
.shake:hover {
-webkit-animation: shake 1500ms alternate infinite linear;
-moz-animation: shake 1500ms alternate infinite linear;
}

E então, o efeito ficará assim (passe o mouse):

Espero que gostem e, qualquer dúvida, consultem o ask-me.

Obrigada ao Great Help.