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.
ameii
ResponderExcluir