Comment créer un effet de survol avec une bordure inférieure extensible ?

Agrandir la bordure inférieure au survol

Dans cette question, l'objectif est de créer un effet de survol où la bordure inférieure s'agrandit lorsque le curseur survole l'élément. L'extrait de code fourni utilise un pseudo-élément avec une transition d'opacité pour révéler la bordure au survol.

Solution :

Pour obtenir l'effet souhaité, nous pouvons utiliser la transformation CSS : scaleX() pour élargir la bordure plutôt que l'opacité. Voici comment cela fonctionne :

1. Créer un pseudo-élément avec une bordure inférieure :

   h1:after {
     position: absolute;
     left: 0;
     content: '';
     height: 40px;
     width: 275px;
     border-bottom: solid 3px #019fb6;
   }

2. Appliquer une transformation scaleX() avec une transition :

   h1:after {
     ...
     transform: scaleX(0);
     transition: transform 250ms ease-in-out;
   }

3. Agrandissez la bordure au survol en définissant scaleX sur 1 :

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

Modification de la direction de l'expansion :

De plus, nous pouvons contrôler la direction de l'expansion de la frontière en ajustant la transformation- propriété origin du pseudo élément :

1. Pour développer à partir du centre :

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

2. Pour agrandir depuis la droite :

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

3. Pour agrandir depuis la gauche :

   h1: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!