Menu Maluco (Ou Agitado)

|
Oláaaaa gente estou muito feliz pelo motivo de: AMANHÃ NÃO TEM AULA! thanks for greve Sartori.


Hoje vou ensinar a fazer esse menuzinho lindo CLIQUE AQUI PRA VISUALIZAR eu achei ele perdido no tumblr sem créditos então apenas converti pro blogger, vamos lá?


1. Cole o código abaixo acima de <head>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>
Ele não é obrigatório, é apenas a fonte.

2.PREPARA QUE ESSE É ENORME, cole ele abaixo de ]]></b:skin>
/*********** Menu Maluco Urban e Conceitual *****************/
/* Animação */
@-webkit-keyframes gangorra {
from {-webkit-transform: rotate(10deg);}
to {-webkit-transform: rotate(-10deg);}
}
@-moz-keyframes gangorra {
from {-moz-transform: rotate(10deg);}
to {-moz-transform: rotate(-10deg);}
}
@-o-keyframes gangorra {
from {-o-transform: rotate(10deg);}
to {-o-transform: rotate(-10deg);}
}
/* Menu */
mn {display: inline-block;
font-family: 'Fjalla One', cursive;
font-size: 25px; /* Tamanho da fonte */
background: #fe579c; /* Cor de fundo do menu */
padding: 2px;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
color: #fff; /* Cor da fonte */
cursor: pointer;
text-shadow: 2px 2px 0px #e9508f; /* Sombra nas palavras do menu */
width: 90px; /* Tamanho do Menu */
}
mn:hover {
    -webkit-animation-name: gangorra;
    -webkit-animation-duration: .01s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
-moz-animation-name: gangorra;
    -moz-animation-duration: 0.1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
-o-animation-name: gangorra;
    -o-animation-duration: 0.1s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;}

3. Pra finalizar, agora no Gadget HTML/Javascript
<a href="/"><mn>Home</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>

E está pronto seu menu maluco ou agitado. Ah já ia me esquecendo, se saber o criador dele ou se você for comenta para eu botar os créditos ♥

4 comentários:

  1. Olá!!Já a coloquei na elite é o nono avatar (azul,Castiel)!
    Muito engraçado esse menu rsrsrssrsr
    Beijoos♡
    Bwblackwords.blogspot.com

    ResponderExcluir
  2. Que menu lindo, ele é bem engraçado mas é bem fofo *o*. Adorei
    Eu ja te coloquei na elite flor, espero que faça o mesmo <3.

    Chu~ Sugar Free

    ResponderExcluir

Oláaaa sinta-se a vontade pra comentar qualquer dica, crítica bacana ou elogios ♥ aceito afiliação e também sigo de volta u~u