Quem conhece o blog Go Imagine levanta a mão \o/ (não julia, você não foi feliz). Quem já visitou sabe que tem um efeito bem legal nos botões das redes sociais, quando você passa o mouse sobre os botões eles balançam:
Veja o efeito aqui também: http://lovellydesign.blogspot.com.br/2013/07/blog-post.html
♥ Aprenda a fazer:
PS: É necessário ter algum conhecimento de html/css, paciência nunca é demais.
1° passo é ir até o código html do seu blog, procurar(Ctrl + F) por "</b:skin>" e acima dele colar:
0% {-webkit-transform: rotate(-1deg); }
25% {-webkit-transform: rotate(3deg); }
50% {-webkit-transform: rotate(-4deg); }
75% {-webkit-transform: rotate(3deg); }
100% {-webkit-transform: rotate(-1deg); }
}
2° passo é saber qual o elemento que será colocado o efeito hover. Se o elemento for #img por exemplo, vai ficar mais ou menos assim:
#img img{
}
#img img:hover{
-webkit-animation: balanco .5s alternate infinite linear;
}
Então o código acrescentado dentro do elemento é apenas a parte destacada em verde que vocês vão copiar e colar dentro do elemento hover.
É simples e fácil mas pra quem entende um pouco de html/css. Espero que todos tenham entendido, mesmo tendo ficado meio confuso. Caso não dê certo, comentem tirando as dúvidas que eu ajudo vocês. Caso tenham algum pedido de tutorial comentem também.
Beijos, Ju s2
Nenhum comentário
Postar um comentário