Menu Bail

 

Yoo, 

- tudo bem? estou com uma dor de cabeça chatinha, mais já está passando, acho que é por conta da gripe mesmo .-.

Estou reformando o chocomapa pois muitas pessoas estavam falando que estavam com dificuldade para achar os tutoriais, irá demorar um pouco mais acho que estará reformado logo assim que eu colocar o novo layout ^_^

Já fizeram esse pedido aqui na C-box acho que umas 3 ou 2 vezes, então irei atender.Pediram um tutorial de como fazer esse nosso menu que fica no cabeçalho, bem, na verdade eu retirei esse menu de um efeito que se faz em imagens, e então fiz um psd para ficar como um menu, então dei o nome de menu bail :)
Preview

Primeiro, cole isso acima de ]]></b:skin>:

@-webkit-keyframes baill {
0% {-webkit-transform: rotate(-10deg)    }
50% {-webkit-transform: rotate(10deg)  translate(-20px); }
70% {-webkit-transform: rotate(-10deg)   translate(20px);}
85% {-webkit-transform: rotate(10deg)   translate(-20px);}
90% {-webkit-transform: rotate(-10deg)  translate(20px);}
95% {-webkit-transform: rotate(10deg)   translate(-20px);}
100% {-webkit-transform: rotate(-10deg)   translate(20px);}}
@-moz-keyframes baill { -moz-transform:
 0% {-moz-transform:rotate(-10deg)translate(-20px); }
50%{-moz-transform: rotate(10deg) translate(20px); }
70%{-moz-transform:rotate(-10deg)  translate(-20px); }
85%{-moz-transform:rotate(10deg)  translate(20px); }
90%{-moz-transform:rotate(-10deg)  translate(-20px); }
95%{-moz-transform:rotate(10deg)  translate(20px); }
100%{-moz-transform:rotate(-10deg)  translate(-20px); }}

 @-o-keyframes baill {
   
 0% {-o-transform:rotate(-10deg) translate(-20px);}
50%{-o-transform:rotate( 10deg) translate(20px); }
70%{-o-transform:rotate(-10deg) translate(-20px);}
85%{-o-transform:rotate(10deg) translate(20px);}
90%{-o-transform:rotate(-10deg) translate(-20px);}
95%{-o-transform:rotate(10deg) translate(20px);}
100%{-o-transform:rotate(-10deg) translate(-20px);}
 } @-ms-keyframes baill {
 0% { -ms-transform:}
50%{ -ms-transform:}
0%{ -ms-transform:}
 }



#baill {margin:1px;}
#baill:hover {-webkit-animation:baill 1.2s alternate  linear;
-moz-animation:baill 1.2s alternate infinite linear;
-o-animation: baill 1.2s alternate infinite linear;
-ms-animation:baill 1.2s alternate infinite linear;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;}

Depois, basta colocar isso em um HTML / Javascript:

<a href="LINK"><img src="IMAGEM" id="baill" /></a>

no negrito você coloca o link e no roxo você coloca sua url da imagem, aqui (www) está o PSD feito por mim :)

Espero que tenham gostado.