09/03/2013

TUTORIAL-efeito flipping


O meu outro blog  precisa de postadores,quem estiver interessado visite:Prince of  html
Boa tarde!

No tutorial de hoje vou ensinar um efeito muito interessante,quando você passa o mouse a imagem da um pulinho e gira,eu não sou muito bom explicando então visualizem AQUI
Gostou? já sabe onde clicar!
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>

E PRONTINHO!
créditos-KAWAII WORLD

8 comentários: