Un menú con animaciones sólo con CSS

Flashy Links es un experimento original para crear enlaces animados utilizando GIFs y CSS.

Sólo necesitamos dos imágenes, la inicial (cfl_link_on.gif) y la animación (cfl_linkback.gif).

El código CSS lo ponemos antes de </b:skin> y sería el siguiente:

ul#cfl-menu { /* será un menú en una lista */
  margin: 15px auto;
  width: 200px;
}

ul#cfl-menu a { /* los enlaces del menú */
  background: #669933 url(URL_cfl_link.gif);
  color: #FFF;
  cursor: pointer;
  display: block;
  font-weight: bold;
  height: auto;
  margin-bottom: 4px;
  padding: 6px 30px 5px;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  width: 140px;
}

ul#cfl-menu li { /* cada item de la lista */
  list-style-type: none;
  margin-bottom: 4px;
}

ul#cfl-menu a:hover, ul#cfl-menu a:focus, 
ul#cfl-menu a:active { /* el efecto de animación */
  background: #669900 url(URL_cfl_linkback.gif);
  color: yellow;
  letter-spacing: 0.3em;
}

Y este es el código HTML:

<ul id="cfl-menu">
  <li><a href="URL_enlace">Inicio</a></li>
  <li><a href="URL_enlace">Página 1</a></li>
  <li><a href="URL_enlace">Página 2</a></li>
  <li><a href="URL_enlace">Página 3</a></li>
  <li><a href="URL_enlace">Página 4</a></li>
</ul>

• Inicio
• Página 1
• Página 2
• Página 3
• Contacto