Carregando atualizações...

X

Efeito CSS3 - Imagem Tremendo

Neste post venho compartilhar aqui com vocês este efeito que faz com que imagens fique com um efeito de tremor. O Efeito só funciona em casos específicos, ou seja, no momento em que você colocar a chamada para o efeito se aplicar a uma imagem, automaticamente ele funcionará. Você vai entender melhor no tutorial.

Primeiramente você tem que... Entrar em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
Tendo encontrada a tag, cole ACIMA dela o seguinte código
@-webkit-keyframes shakeimage{from {-moz-transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg); }
to {-moz-transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg);
transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg); }}

@-moz-keyframes shakeimage{from {-moz-transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg);
transform: scale(1.0) rotate(0deg) translateX(1px) translateY(1px) skewX(0deg) skewY(0deg); }
to {-moz-transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg);
-o-transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg);
transform: scale(1.0) rotate(0deg) translateX(-1px) translateY(-1px) skewX(0deg) skewY(0deg); }}

.treme{margin:1px;-webkit-transition: all 0.4s linear;-moz-transition: all 0.4s linear;transition: all 0.4s linear;}
.treme:hover{-webkit-animation: shakeimage 50ms alternate infinite ease;-moz-animation: shakeimage 50ms alternate infinite ease;}

Você pode observar no código vários números em px, alguns são positivos outros negativos; estes números representam a intensidade do movimento da imagem. Ou seja, conforme você for aumentando ou até mesmo diminuindo deixando em números negativos, automaticamente você estará modificando a intensidade de cada movimento da imagem. 

Como eu disse no início desta postagem, este efeito não se aplicará a todas as imagens do blog, somente as que tiverem a seguinte descrição:
<img src="link da sua imagem" class="treme">

Como no exemplo abaixo:

Imagem retirada do site www.makeoverday.com.br

Qualquer dúvida a respeito deste tutorial, não deixe de perguntar nos comentários abaixo.


Veja muito mais efeitos interessantes como este no site

Cursos Online com Certificado - Cursos 24 Horas

NOSSO CANAL
VER TV A CABO ONLINE GRÁTIS
TV ONLINE 1.0