Creación de un menú de navegación con efectos de rollover de texto
| Autor: | voku |
|---|---|
| Views Total: | 3,485 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 6, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Una barra de navegación horizontal de aspecto agradable que viene con el efecto de rollover de texto de menú cuando el ratón Hover, construido con HTML5, CSS y CSS3 transforma & transiciones.
Funcionamiento
Cree el código HTML para una barra de navegación. Utilice el atributo de texto de datos de HTML5 para el texto rodante.
<ul> <li><a data-text="CSS" href="#">CSS</a></li> <li><a data-text="HTML" href="#">HTML</a></li> <li><a data-text="Javascript" href="#">JavaScript</a></li> <li><a data-text="About" href="#">About</a></li> </ul>
Las reglas CSS/CSS3.
ul {
background-color: rgba(0,0,0,0.4);
border-bottom: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 0 8px rgba(0,0,0,0.4) inset;
border-radius: 16px;
margin: 0;
padding: 0 30px;
}
ul {
display: inline-block;
text-align: center;
height: 50px;
overflow: hidden;
}
ul li a {
letter-spacing: -1px;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
}
ul li {
float: left;
height: 100%;
list-style: none;
margin: 0 30px;
}
ul li * {
display: inline-block;
font-size: 1.3em;
line-height: 50px;
}
ul li a {
margin-top: -50px;
transition: 0.3s cubic-bezier(0.1, 0.1, 0.5, 1.4);
}
ul li a:hover {
margin-top: 0;
}
ul li a:before {
content: attr(data-text);
display: block;
color: #CDF745;
}
color:#CDF745;
}
