HTML5/CSS3

Menú de Navegación con Múltiples Animaciones CSS

Índice
  1. Navegación con múltiples animaciones CSS
    1. El html
    2. Creando las animaciones CSS
  2. Conclusión

Hoy os traigo un set de múltiples animaciones CSS para la barra del menú de navegación. Con ellas podrás dar vida a tu página web. ¿Te animas a probarlas?

Navegación con múltiples animaciones CSS

Gracias a la magia de CSS3 podemos crear espectaculares animaciones.

En esta ocasión vamos a aprovechar el potencial de CSS para crear nuestras animaciones en el menú de navegación.

El html

Comenzamos creando nuestro archivo Html. La estructura que necesitaremos para hacer el menú es la de un menú de navegación normal y corriente, la estructura es la siguiente:

<header>
  <h1>
     Menú de Navegación Animado
  </h1>
  <span>
     tuwebcreativa.com
  </span>
</header>
<div class="container red topBotomBordersOut">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container purple topBotomBordersIn">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container indigo topLeftBorders">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container blue circleBehind">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container cyan brackets">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container teal borderYtoX">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container green borderXwidth">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container lightGreen pullDown">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container lime pullUp">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container yellow pullRight">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container amber pullLeft">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container orange pullUpDown">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container deepOrange pullRightLeft">
  <a>INICIO</a>
  <a>ARTICULOS</a>
  <a>PORTFOLIO</a>
  <a>SOBRE </a>
  <a>CONTACTO</a>
</div>

<div class="container brown highlightTextOut">
  <a alt="INICIO">INICIO</a>
  <a alt="ARTICULOS">ARTICULOS</a>
  <a alt="PORTFOLIO">PORTFOLIO</a>
  <a alt="SOBRE">SOBRE</a>
  <a alt="CONTACTO">CONTACTO</a>
</div>

<div class="container gray highlightTextIn">
  <a alt="INICIO">INICIO</a>
  <a alt="ARTICULOS">ARTICULOS</a>
  <a alt="PORTFOLIO">PORTFOLIO</a>
  <a alt="SOBRE">SOBRE</a>
  <a alt="CONTACTO">CONTACTO</a>
</div>

<footer>
  <span>tuwebcreativa.com</span>
</footer>

Cómo quiero enseñaros varios ejemplos he creado varios menu. Vosotros solo deberéis de elegir el que más os guste.

Creando las animaciones CSS

Ahora solo toca aplicar los estilos a las diferentes clases para realizar nuestras animaciones CSS.

 Menu de Navegación con Rotación

El código es bastante sencillo y como veréis la parte más complicada, por decirlo de alguna manera, es la de las animaciones, pero en realidad son muy fáciles de interpretar.

@import 'https://fonts.googleapis.com/css?family=Raleway';

html, body
{
    margin: 0px;
}

header, footer
{
    font-family: Raleway;
    margin: 0 auto;
    padding: 5em 3em;
    text-align: center;
    background: #555;
}

header h1
{
    color: #AAA;
    font-size: 40px;
    font-weight: lighter;
    margin-bottom: 5px;
}

header span
{
    color: #222;
}

footer span
{
  color: #AAA;
}

div.container
{
    font-family: Raleway;
    margin: 0 auto;
    padding: 10em 3em;
    text-align: center;
}

div.container a
{
    color: #FFF;
    text-decoration: none;
    font: 20px Raleway;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

.red
{
    background: #f44336;
}

.purple
{
    background: #673ab7;
}

.indigo
{
    background: #3f51b5;
}

.blue
{
    background: #2196f3;
}

.cyan
{
    background: #00bcd4;
}

.teal
{
    background: #009688;
}

.green
{
    background: #4caf50;
}

.lightGreen
{
    background: #8bc34a;
}

.lime
{
    background: #c0ca33;
}

.yellow
{
    background: #fdd835;
}

.amber
{
    background: #ffc107;
}

.orange
{
    background: #ff9800
}

.deepOrange
{
    background: #ff5722;
}

.brown
{
    background: #795548;
}

.gray
{
    background: #9e9e9e;
}

/* Top and Bottom borders go out */div.topBotomBordersOut a:before, div.topBotomBordersOut a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersOut a:before
{
    top: 0px;
    transform: translateY(10px);
}

div.topBotomBordersOut a:after
{
    bottom: 0px;
    transform: translateY(-10px);
}

div.topBotomBordersOut a:hover:before, div.topBotomBordersOut a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

/* Top and Bottom borders come in */div.topBotomBordersIn a:before, div.topBotomBordersIn a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

div.topBotomBordersIn a:before
{
    top: 0px;
    transform: translateY(-10px);
}

div.topBotomBordersIn a:after
{
    bottom: 0px;
    transform: translateY(10px);
}

div.topBotomBordersIn a:hover:before, div.topBotomBordersIn a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}

/* Top border go down and Left border appears */div.topLeftBorders a:before
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 2px;
    height: 0px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

div.topLeftBorders a:after
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #FFF;
    content: "";
    opacity: 1;
    transition: all 0.3s;
}

div.topLeftBorders a:hover:before
{
    height: 100%;
}

div.topLeftBorders a:hover:after
{
    opacity: 0;
    top: 100%;
}

/* Circle behind */div.circleBehind a:before, div.circleBehind a:after
{
    position: absolute;
    top: 22px;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 4px solid #0277bd;
    transform: translateX(-50%) translateY(-50%) scale(0.8);
    border-radius: 50%;
    background: transparent;
    content: "";
    opacity: 0;
    transition: all 0.3s;
    z-index: -1;
}

div.circleBehind a:after
{
    border-width: 2px;
    transition: all 0.4s;
}

div.circleBehind a:hover:before
{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
}

div.circleBehind a:hover:after
{
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1.3);
}

/* Brackets go out */div.brackets a:before, div.brackets a:after
{
    position: absolute;
    opacity: 0;
    font-size: 35px;
    top: 0px;
    transition: all 0.3s;
}

div.brackets a:before
{
    content: '(';
    left: 0px;
    transform: translateX(10px);
}

div.brackets a:after
{
    content: ')';
    right: 0px;
    transform: translateX(-10px);
}

div.brackets a:hover:before, div.brackets a:hover:after
{
    opacity: 1;
    transform: translateX(0px);
}


/* Border from Y to X  */div.borderYtoX a:before, div.borderYtoX a:after
{
    position: absolute;
    opacity: 0.5;
    height: 100%;
    width: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderYtoX a:before
{
    left: 0px;
    top: 0px;
}

div.borderYtoX a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderYtoX a:hover:before, div.borderYtoX a:hover:after
{
    opacity: 1;
    height: 2px;
    width: 100%;
}

/* Border X get width  */div.borderXwidth a:before, div.borderXwidth a:after
{
    position: absolute;
    opacity: 0;
    width: 0%;
    height: 2px;
    content: '';
    background: #FFF;
    transition: all 0.3s;
}

div.borderXwidth a:before
{
    left: 0px;
    top: 0px;
}

div.borderXwidth a:after
{
    right: 0px;
    bottom: 0px;
}

div.borderXwidth a:hover:before, div.borderXwidth a:hover:after
{
    opacity: 1;
    width: 100%;
}

/* Pull down  */div.pullDown a:before
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullDown a:hover:before
{
    height: 100%;
}

/* Pull up  */div.pullUp a:before
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    bottom: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullUp a:hover:before
{
    height: 100%;
}

/* Pull right  */div.pullRight a:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullRight a:hover:before
{
    width: 100%;
}

/* Pull left  */div.pullLeft a:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullLeft a:hover:before
{
    width: 100%;
}

/* Pull up and down  */div.pullUpDown a:before, div.pullUpDown a:after
{
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullUpDown a:before
{
    top: 0px;
} 

div.pullUpDown a:after
{
    bottom: 0px;
}

div.pullUpDown a:hover:before, div.pullUpDown a:hover:after
{
    height: 100%;
}

/* Pull right and left  */div.pullRightLeft a:before, div.pullRightLeft a:after
{
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

div.pullRightLeft a:before
{
    left: 0px;
} 

div.pullRightLeft a:after
{
    right: 0px;
}

div.pullRightLeft a:hover:before, div.pullRightLeft a:hover:after
{
    width: 100%;
}

/* Highlight text out  */div.highlightTextOut a
{
    color: rgba(255, 255, 255, 0.3); 
}

div.highlightTextOut a:before, div.highlightTextIn a:before
{
    position: absolute;
    color: #FFF;
    top: 0px;
    left: 0px;
    padding: 10px;
    overflow: hidden;
    content: attr(alt);
    transition: all 0.3s;
    transform: scale(0.8);
    opacity: 0;
} 

div.highlightTextOut a:hover:before, div.highlightTextIn a:hover:before
{
    transform: scale(1);
    opacity: 1;
}

/* Highlight text in  */div.highlightTextIn a
{
    color: rgba(0, 0, 0, 0.4); 
}

div.highlightTextIn a:before
{
    transform: scale(1.2);
}

Conclusión

Sin necesidad de recurrir a JavaScript hemos creado diferentes ejemplos de menú CSS3 animados sin necesidad de JavaScript.

Si quieres saber más sobre desarrollo y diseño gráfico sígueme en las redes sociales o visita con frecuencia mi página web. Como siempre gracias por tu visita.

AJ Morales

Consultor de Marketing Digital, especializado en Marketing de Contenidos y Posicionamiento SEO 🚀. Me considero un apasionado de la tecnología y de la edición profesional de fotografías con Adobe Photoshop. Málaga ciudad con alma.

Dejar comentario
Compartir
Publicado por
AJ Morales
Tags: Animaciones CSSbarra navegacion con animacionmenu animadomenu animado css
8 años Hace

Publicaciones Recientes

Gemini Deep Research en Google Drive: Analiza Múltiples Documentos en Segundos y Ahorra Horas de Trabajo

Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…

2 días Hace

Quitar la Marca de Agua en las Imágenes de Google Nano Banana

Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…

3 semanas Hace

Límites de Gemini Gratis ¿Qué te ofrece la IA de Google sin pagar?

¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……

3 meses Hace

Convierte una foto en una figura coleccionable con Nano Banana Gratis

¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…

3 meses Hace

Cómo Hacer un Video de Ciudad Emblemática con Veo 3

Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…

3 meses Hace

Google Opal: Automatiza Tareas Diarias y Revoluciona Tu Productividad

¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…

3 meses Hace

Más información

📕 Política de Cookies
📗 Política de Privacidad
📘 Aviso Legal

Esta página utiliza cookies para mejorar su rendimiento