22 de dez de 2012

Menu Pisca-Pisca

Olá anjos!
Hoje vou ensinar um menu bem bonitinho que aprendi no Tumblr Single Themes, chama-se menu Pisca-Pisca, vocês podem ver um exemplo dele aqui.
O tutorial é bem simples e acho que ficaria ótimo para colocar em uma lista de afiliados ou em um menu de redes sociais, isso vocês quem decidem.

Vá no seu HTML, procure por:

/b:skin

ACIMA disso, cole:

/* Menu Pisca-Pisca - by: Danii Deutscher */
@-webkit-keyframes piscapisca {
from {-moz-opacity: 0; opacity: 0;}
to {opacity: 100; -moz-opacity: 100;}
}
@-moz-keyframes piscapisca {
from {-moz-opacity: 0; opacity: 0;}
to {opacity: 100; -moz-opacity: 100;}
}
@-o-keyframes piscapisca {
from {-moz-opacity: 0; opacity: 0;}
to {opacity: 100; -moz-opacity: 100;}
}
mn {background: #COR-DE-FUNDO; color: #COR-DA-LETRA; display: inline-block; padding: 5px; text-align: center; font-variant: small-caps; text-transform: lowercase; font-weight: bold; cursor: pointer; font-family: 'Verdana'; font-size: 11px;}
mn:hover {-webkit-animation-name: piscapisca;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
-moz-animation-name: piscapisca;
    -moz-animation-duration: 0.2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
-o-animation-name: piscapisca;
    -o-animation-duration: 0.2s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;}


Modifique o que está em negrito.

Onde você quiser que o menu apareça, use o seguinte código:

<a href="SEU LINK"><mn>NOME DO LINK</mn></a>

Espero que seja útil, qualquer dúvida só perguntar.

Um comentário:

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!