tutorial
Tutorial: Efeito gira luz
Oi gente, faz um tempo que eu não trago tutoriais aqui, sempre utilitários e tal, e hoje eu trouxe um efeito que eu não sei o nome mas denominei como "Gira luz" ok eu sei que é sem criatividade mas está melhor que "This is us" Directioners entendem, enfim nada a ver a comparação né mas tudo okay!
Bom, esse efeito é bem bacana, eu achei bem bacana e diferente, clica no preview para ver ele e saber o porque o nome gira luz.
Gostaram, eu acho que esse efeito é mais usado em gadgets de afiliados mas dai vocês decidem como querem usar, cliquem em Leia mais para pegar o tutorial!
Só lembrando que eu peguei desse tumblr (www) e com a ajuda do meu irmão eu transformei em código para blog e troquei o nome, porque "Moderas" é estranho.
Bom então vamos lá, primeiro você vai em Modelo e vai clicar em Editar Html e lá você procura pela tag;
]]></b:skin>
Acima dele você cola o seguinte código.
/***** EFEITO GIRA LUZ ******/
.imagem:hover{opacity:1.0;-webkit-transition-duration: .45s;}
.efeito img{width: 50px; -webkit-transition-duration: .45s;}
.efeito:hover img {-webkit-transition-duration: .45s; -webkit-transform: rotate(360deg); opacity: 0.20;}
.efeito img:hover {-webkit-transition-duration: .45s; opacity: 1.0;}
Após colar esse código lá você não precisa editar nada só salvar e ir em Layout adicionar um gadget de HTML/Javascript e colar o que precisa para fazer o efeito funcionar por completo.
<center><div class="efeito">
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem" /></a>
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem" /></a>
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem" /></a>
Bom, apenas trocando o que se pede, você pode usar qualquer tipo de imagem, a que você preferir, lembre-se de dar créditos!
Nao fucncionou :(
ResponderExcluir