Der Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt-CSS-Tutorial-php.cn

Der Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt

零到壹度

Freigeben： 2018-04-04 11:09:56

Original

1977 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Code zum Implementieren des CSS-Erweiterungseffekts vorgestellt, wenn die Maus auf beiden Seiten über die Elementunterstreichung fährt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und ihn als angeben eine Referenz. Folgen wir dem Editor, um einen Blick darauf zu werfen

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

Nach dem Login kopieren

Verwandte Empfehlungen:

Pseudoelemente und CSS3 verwenden, um Wenn die Maus in die Unterstreichung bewegt wird, wird sie nach beiden Seiten erweitert. Horizontale Navigationsleiste + Navigationsleiste folgen + Navigationsleiste unterstreicht den Gleiteffekt

Das obige ist der detaillierte Inhalt vonDer Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!