Comment puis-je créer un soulignement animé de gauche à droite avec CSS et l'inverser au survol ?

Animation des soulignements : de gauche à droite

Le défi de la reproduction de l'effet de transition d'uber.design réside dans l'inversion de la transition en survol. Bien que le CSS fourni puisse animer le soulignement de gauche à droite, il lui manque la possibilité d'inverser l'animation.

Pour obtenir l'effet souhaité, nous pouvons exploiter une combinaison de dégradé et de positionnement d'arrière-plan. En appliquant un dégradé linéaire à l'élément et en ajustant la position de l'arrière-plan avec un délai, nous pouvons créer l'illusion d'un soulignement s'étendant de gauche à droite.

Voici le CSS révisé :

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

Ce code crée un dégradé linéaire sur l'élément, initialement positionné en bas à gauche (0% 100%). Au survol, la position de l'arrière-plan change en bas à droite (100 % 100 %), ce qui entraîne une expansion du dégradé sur la largeur de l'élément, créant l'effet d'un soulignement se déplaçant de gauche à droite.

Pour affiner -ajustez l'animation, ajustez les valeurs de taille d'arrière-plan et de durée de transition en fonction de l'effet souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!