Crea tu web, tutor html, css
 

Efectos CSS: Enlace autodeslizante

En este efecto el texto del enlace se desplaza hacia abajo para desaparecer empujado por otro texto que entra desde arriba.

Puedes verlo en el encabezado de la página, pasa el ratón por los enlaces Home About Servie Contact y verás como funciona este curioso efecto, solo con CSS.

El HTML.

El código HTML para el ejemplo es una sencilla barra de navegación, con varios enlaces dispuestos mediante flex en una linea horizontal. 

Hay un contenedor (class: slide-links) para englobar a todos los enlaces del menú

Cada enlace lleva un atributo data-title que contiene el texto que empuja hacia abajo a la cabecera del menú. Puede ser cualquier texto pero procura que ocupe el mismo ancho que la cabecera del menú a la que desplaza.

Importanate el texto del enlace debe ir en un bloque span

Y por supuesto este efecto realmente le llamado enlace deslizante, pero con pequeñas modificaciones puede aplicarse a cualquier texto, básicamente se trata de cambiar la etiqueta a por div

<div class="slide-links">
  <div class="itemSlide">
  <a href="#" data-title="Home"><span>Home</span></a>
  </div>
  <div class="itemSlide">
  <a href="#" data-title="About"><span>About</span></a>
  </div>
  <div class="itemSlide">
  <a href="#" data-title="Service"><span>Service</span></a>
  </div>
  <div class="itemSlide">
  <a href="#" data-title="Contact"><span>Contact</span></a>
  </div>
</div>

El CSS

En el archivo CSS defines los estilos. Los fundamentales son el pseudoselector ::after que contiene el texto entrante y span que va a ser el texto salietne. Ambos movimientos se producen mediante un transform animado, ambos deben tener la misma duración en la animación.

En esta solución se emplea el layout flex, aunque también puedes usar el grid o técnicas antigua con floats.

.slide-links{
   display:flex;
   font-size: 2rem;
   justify-content: center;
   margin-top: 14px;
   overflow:hidden;
}
.itemSlide{
   position: relative;
   overflow:hidden;
   padding: 0 0.5rem
}
.itemSlide a{
   text-decoration: none;
}
.itemSlide a span, .itemSlide a::after{
   transition: all 0.4s;
}

.itemSlide a span{
   display:block;
   width: fit-content;
   transform: translateY(0px);
}

.itemSlide a::after {
   content: attr(data-title);
   position: absolute;
   top: 0;
   transform: translateY(-100%);
   padding: 0;
   width: 100%;
   white-space: nowrap;
   color: Red;
}
.itemSlide a:hover::after{
   transform: translateY(0%);
}
.itemSlide a:hover span{
   transform: translateY(100%);
}

}

Con muy pocas modificaciones podrás conseguir que el título del menú se desplaca lateralmente o de abajo arriba. Te lo dejo apra que practiques.