<h3>Imagens balançando no blog</h3>

Ola Amigos(a), reservei para hoje um efeito bem legal que balança e agita as imagens. Deseja chamar a atenção em determinadas partes no seu blog? Confira abaixo

Copie o código abaixo, cole antes de ]]></b:skin> e salve.
.shake { -webkit-animation: shake 1000ms alternate infinite linear; -moz-animation: shake 1000ms alternate infinite linear; border-radius:20%; } @-ms-keyframes shake /* IExplorer9*/ { 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 e Google 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); } } @-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); } } }

Agora adicione o endereço da imagem dentro do código abaixo e cole
onde desejar exibir o efeito no seu blog.

<div class="shake">
<img class="shake" src=" Endereço da imagem " />
</div>

Se desejar utilizar o efeito com um balanço mais lento retire os seguintes trechos do código e cole onde desejar exibir o efeito no seu blog.

<div class="shake">
<img class="shake" src=" Endereço da imagem " />
</div>

Para utilizar imagens lado a lado sem quebra de linha repita o trecho.

<img class="shake" src=" Endereço da imagem " />

Confira o resultado abaixo:

com efeito

Com efeito mais lento

sem efeito