20 de maio de 2014

Efeito Ploft

Meia noite e eu aqui sem sono, logo amanhã que vai ser um dia cheio de coisas para fazer.
Bem pessoal, estava olhando tumblrs de html, me deparei com este efeito e pensei:
meus amigos vão gostar, por isso disponibilizo para vocês. Encontrei este efeito no tumblr
Revolution Html por Fabrício|solucionar.tumblr.com.
Para usa-lo: copie os códigos abaixo e cole antes da Tag ]]></b:skin>

@-webkit-keyframes spaceboots {0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }100% { -webkit-transform: translateY(700px); opacity: 0; }}.ploft:hover,.ploft:focus { -webkit-animation-name: spaceboots; -webkit-animation-duration: 1.7s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}.ploft{display: inline-block;padding-top: 50px;}

Não mexa em nada se não tive um conhecimento vasto em Css, então sabe o que eu negritei ? pois bem lá é a velocidade do efeito, é a unica coisa que você pode mexer a seu gosto se não tiver tanto conhecimento assim, lembre-se quando menor o numero mais rápido é o efeito!

Para colocar em seu blog, pegue o código abaixo e coloque no gadget HTML/JAVA SCRIPT
<a href="http://sua url"><img width="auto" height="auto" class="ploft" src="url da imagem"></a>
<a href="http://sua url"><img width="auto" height="auto" class="ploft" src="url da imagem"></a>

Kissus

Um comentário:

  1. Amei o tuto bjinhus :*
    bubblepoop.blogspot.com.br

    ResponderExcluir

- Este espaço é todo seu. Tire suas dúvidas!

- Por favor, Não faça algum request pelos comentários,
para isso serve a Ask.

- Se não gostou de algo, não use palavras baixas. Ninguém precisa se rebaixar tanto para expressar uma opinião.

- Leio todos os comentários e retribuo todos.

-Thanks