Tutorial - Efeito Flipping

Ola cerejinhas ,
tudo bem com vocês? graças a Deus eu estou bem, será que o blog nossa esta ficando famoso? tomará que sim em rsrs , finalmente aqui em minha cidade o sol saiu não estava aguentando mais aquele frio, hoje trouxe para vocês um feito que acho super legal que é o Flipping , retirado lá do kawaii world , quer aprender? então vamos lá.
 Preview
         1. Vá até editar HTML e procure por <head>. Abaixo da tag, cole o seguinte:

<link href='http://static.tumblr.com/0xqvkot/MdKmj9am9/flippingkw.css' media='screen' rel='stylesheet'/>

2. Ainda no mesmo local, procure por ]]></b:skin> e acima, cole: 

.efeitoflipping{
padding: 3px;
}
.efeitoflipping:hover{
-webkit-backface-visibility: visible !important;
 -webkit-animation-name: flipping;
 -moz-backface-visibility: visible !important;
 -moz-animation-name: flipping;
 -o-backface-visibility: visible !important;
 -o-animation-name: flippink;
 backface-visibility: visible !important;
 animation-name: flipping;
-webkit-animation-duration: 1s;
 }

3. Por fim, em um gadget de HTML/JavaScript, cole e substitua com o que se pede:

<a href="LINK" title="Nome do blog"><img src="LINK DA IMAGEM" class="efeitoflipping"/></a>
Retirado do Kawaii World.

Kiss Bia.

4 comentários:

  1. Acabo não usando muitos efeitos, mas os acho super fofos!

    http://daynightv.blogspot.com.br/

    ResponderExcluir
  2. muito legal esse efeito. não tinha visto ainda ^^
    garotaadocicada.blogspot.com

    ResponderExcluir