Olá lindinhos! Como vocês estão??
Hoje eu trouxe um tutorial que achei em algum blog que não me lembro o nome ( realmente eu não me lembro, queria dar os devidos créditos). Vou ensinar dois modelos, o primeiro ele vai "infinitamente" o outro ele "vai e volta", os dois tem o efeito de girar a imagem ao passar o mouse. Para conferir o modelo 1 veja aqui para visualizar o modelo 2 veja aqui !
Vamos ver?
Bom, Primeiro vá em seu HTML e procure por:
]]></b:skin>Depois de ter achado o código, cole esse outro acima dele. Ele serve para os dois efeitos!
Depois de ter feito isso, você irá escolher um dos modelos..isa-cute{-webkit-transition-duration: .80s;}.isa-cute:hover {opacity:1.0; border-radius: 50px; -webkit-transform: rotate(90deg) rotate(280deg);-webkit-transition-duration: 2.5s -webkit-transition-duration: .80s;}
Se você quiser usar o modelo 1, vá em seu Layout Adicionar um Gadget HTML/Java Script e cole esse código:
Depois Salve!<marquee behavior="infinity" onmouseout="this.start(1);" onmouseover="this.stop(0);" scrollamount="5"><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a></marquee>
Se você quiser utilizar o modelo 2, vá em Layout Adicionar um Gadget HTML/Java Script e cole:
<marquee behavior="alternate" onmouseout="this.start(1);" onmouseover="this.stop(0);" scrollamount="5"><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a><a href="https://www.blogger.com/LINK" title="TÍTULO"><img class="isa-cute" src="LINK DA IMAGEM" /></a></marquee>
Pronte, agora é só Salvar!
Bom, esse foi o tutorial de hoje. Espero que tenha gostado! Comente o que achou.
Nossa, ameii os efeitos super lindos! Como vc cria esses efeitos, personalização e os códigos deles??
ResponderExcluirThere | Fluffy White
Que bom que gostou *--*
ExcluirBom, é meio difícil responder pelo comentário, sorry... Vou fazer um post somente explicando como se criar efeito, ok! Prometo que não demoro muito!! Bjos ♥