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;
   }

   Copier après la connexion

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

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

   Copier après la connexion

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

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

   Copier après la connexion

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%;
   }

   Copier après la connexion

2. Pour agrandir depuis la droite :

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

   Copier après la connexion

3. Pour agrandir depuis la gauche :

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

   Copier après la connexion

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!