CSS3繪製有活力的連結底線方法-css教學-PHP中文網

CSS3繪製有活力的連結底線方法

高洛峰

發布： 2017-03-07 14:19:10

原創

1545 人瀏覽過

連結下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，完整程式碼檢視。

<!DOCTYPE html>
<html>
<head>
  <meta charset="gb2312">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style>
body{   
  background-color: #000;   
}   

h2{    
  text-align: center;   
  margin-top: 100px;   
}   

h2 > a {   
  position: relative;   
  color: #FFF;   
  text-decoration: none;   
  padding-bottom: 5px;   
}   

h2 > a:hover {   
  color: #FFF;   
}    

h2 > a:before {   
  content: "";   
  position: absolute;   
  width: 100%;   
  height: 2px;   
  bottom: 0;   
  left: 0;   
  background-color: #FFF;   
  visibility: hidden;   
  -webkit-transform: scaleX(0);   
  transform: scaleX(0);   
  -webkit-transition: all 0.3s ease-in-out 0s;   
  transition: all 0.3s ease-in-out 0s;   
}   

h2 > a:hover:before {   
  visibility: visible;   
  -webkit-transform: scaleX(1);   
  transform: scaleX(1);   
}   
</style>
</head>
<body>
   <h2>
     <a href="/">悬停在我上面</a>
   </h2>
</body>
</html>

登入後複製

創建這種效果是非常簡單的，不需要添加額外的DOM元素到HTML，不過需要考慮瀏覽器的兼容性問題，在老舊版本的瀏覽器中它只會顯示為一個普通的底線。

好了，現在正式開始。我們需要做的第一件事就是移除text-decoration，並設定連結為相對定位。我們需要確保連結在hover時不會改變顏色，這裡我們拿h2舉例：

h2 > a {   
      position: relative;   
      color: #000;   
      text-decoration: none;   
}   

h2 > a:hover {   
      color: #000;   
}

登入後複製

接下來，我們要新增border，透過變換隱藏它。插入一個:before並且設定它scaleX（0），保守起見，如果瀏覽器不支持，我們透過visibility: hidden隱藏它。

h2 > a:before {   
      content: "";   
      position: absolute;   
      width: 100%;   
      height: 2px;   
      bottombottom: 0;   
      left: 0;   
      background-color: #000;   
      visibility: hidden;   
      -webkit-transform: scaleX(0);   
      transform: scaleX(0);   
      -webkit-transition: all 0.3s ease-in-out 0s;   
      transition: all 0.3s ease-in-out 0s;   
}

登入後複製

最後設定動畫時間為0.3s，現在我們只需要設定元素在hover時顯示且scaleX(1)：

h2 > a:hover:before {   
      visibility: visible;   
      -webkit-transform: scaleX(1);   
      transform: scaleX(1);   
}

登入後複製

#大功告成！

這樣就完成了一個很有活力的底線動畫。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。

更多CSS3繪製有活力的連結下劃線方法相關文章請關注PHP中文網！