Comment créer une extension animée de Border Bottom en survol ?

Effet de survol : expansion animée de la bordure inférieure

Dans cette question, l'objectif est de créer un effet de survol qui étend la bordure inférieure d'un élément lors du survol. Pour obtenir cet effet, nous pouvons utiliser la propriété transform et la faire passer de 0 à 1 en survol.

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}

Cette approche utilise un pseudo-élément pour séparer la transition de bordure du texte, en préservant le HTML d'origine. structure. La propriété transform-origin peut être manipulée pour étendre la bordure dans différentes directions, comme illustré ci-dessous :

<h1>

h1.fromRight:after {
  transform-origin: 100% 50%;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}

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!