Menú Animado con CSS3
Hasta el lanzamiento de CSS3, las animaciones web
eran realizadas con tecnología Flash, JavaScript o Gifs animados.
Esta nueva versión de CSS nos permite desarrollar animaciones de una forma novedosa, con un código más limpio y fácil de escribir.
Puedes generar un vistoso menú de navegación redondeado, sin imágenes y sin Javascript, y hacer uso efectivo de las nuevas propiedades de CSS3 para contornos y animación.
En este ejemplo combinaremos la creación de sombras, y las transiciones para crear un menú animado con CSS3.
veamos un ejemplo
Estructura html---------------------------
Codigo CSS-----------------------
body { veamos un ejemplo
Estructura html---------------------------
<html>
<head>
<title>Formador TI</title>
</head>
<body>
<h2>Menú Animado con CSS3 </h2>
<div class="menu">
<ul class="nav">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</body>
</html>
margin-left: 10px; margin-top: 10px;
}
ul.nav {
list-style: none; display: block; width: 200px;
}
ul.nav li a {
-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -webkit-box-shadow: 2px 2px 4px #222222; -moz-box-shadow: 2px 2px 4px #222222; -o-box-shadow: 2px 2px 4px #222222; color: #FFF; padding: 7px 15px 7px 15px; width: 100px; display: block; text-decoration: none; background-color: #1865BA; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul.nav li a:hover {
color: #0D436A; padding: 7px 15px 7px 30px; background-color: #F90; font-weight: bold;
}
Aquí puedes descargar el ejemplo y archivos base
No hay comentarios