Le code implémente l'effet d'expansion CSS lorsque la souris passe des deux côtés du soulignement de l'élément.-tutoriel CSS-php.cn

Le code implémente l'effet d'expansion CSS lorsque la souris passe des deux côtés du soulignement de l'élément.

零到壹度

Libérer： 2018-04-04 11:09:56

original

1977 Les gens l'ont consulté

Cet article présente principalement le code pour implémenter l'effet d'expansion CSS lorsque la souris passe à travers le soulignement de l'élément des deux côtés. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner sous forme. une référence. Suivons l'éditeur pour y jeter un œil

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
<style type="text/css">
#underline{  
  width: 200px;   
   height: 50px;    
   background: #ddd;    
   margin: 20px;    
   position: relative;
 }
  
  #underline:after{  
    content: "";    
    width: 0;   
    height: 1px;    
    background: blue;    
    position: absolute;    
    top: 100%;    
    left: 50%;    
    transition: all .8s;
 }
    
    #underline:hover:after{ 
      left: 0%;   
      width: 100%;
 }
 </style>
 
 </head>
 
 <body>   
      <p id="underline"></p>
      
 </body>
 
 </html>

Copier après la connexion

Recommandations associées :

Utilisation de pseudo-éléments et CSS3 à réaliser Lorsque la souris est déplacée vers le soulignement, elle s'étendra des deux côtés Barre de navigation horizontale + suivi de la barre de navigation + effet de glissement de soulignement de la barre de navigation

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!