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:
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
