亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3繪制有活力的鏈接下劃線

  發(fā)布時間：2016-07-14 15:33:50   作者：佚名   我要評論
這篇文章主要為大家詳細介紹了CSS3有活力的鏈接下劃線繪制方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

鏈接下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，完整代碼查看。

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="gb2312">  
  5.   <meta name="viewport" content="width=device-width">  
  6.   <title>JS Bin</title>  
  7. <style>  
  8. body{   
  9.   background-color: #000;   
  10. }   
  11.   
  12. h2{    
  13.   text-align: center;   
  14.   margin-top: 100px;   
  15. }   
  16.   
  17. h2 > a {   
  18.   position: relative;   
  19.   color: #FFF;   
  20.   text-decoration: none;   
  21.   padding-bottom: 5px;   
  22. }   
  23.   
  24. h2 > a:hover {   
  25.   color: #FFF;   
  26. }    
  27.   
  28. h2 > a:before {   
  29.   content: "";   
  30.   position: absolute;   
  31.   width: 100%;   
  32.   height: 2px;   
  33.   bottom: 0;   
  34.   left: 0;   
  35.   background-color: #FFF;   
  36.   visibility: hidden;   
  37.   -webkit-transform: scaleX(0);   
  38.   transform: scaleX(0);   
  39.   -webkit-transition: all 0.3s ease-in-out 0s;   
  40.   transition: all 0.3s ease-in-out 0s;   
  41. }   
  42.   
  43. h2 > a:hover:before {   
  44.   visibility: visible;   
  45.   -webkit-transform: scaleX(1);   
  46.   transform: scaleX(1);   
  47. }   
  48. </style>  
  49. </head>  
  50. <body>  
  51.    <h2>  
  52.      <a href="/">懸停在我上面</a>  
  53.    </h2>  
  54. </body>  
  55. </html>  
  56.   

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

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

CSS Code復制內容到剪貼板
  1. h2 > a {   
  2.       position: relative;   
  3.       color: #000;   
  4.       text-decoration: none;   
  5. }   
  6.   
  7. h2 > a:hover {   
  8.       color: #000;   
  9. }       
  10.   

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

CSS Code復制內容到剪貼板
  1. h2 > a:before {   
  2.       content: "";   
  3.       position: absolute;   
  4.       width: 100%;   
  5.       height: 2px;   
  6.       bottombottom: 0;   
  7.       left: 0;   
  8.       background-color: #000;   
  9.       visibility: hidden;   
  10.       -webkit-transform: scaleX(0);   
  11.       transform: scaleX(0);   
  12.       -webkit-transition: all 0.3s ease-in-out 0s;   
  13.       transition: all 0.3s ease-in-out 0s;   
  14. }   
  15.   

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

CSS Code復制內容到剪貼板
  1. h2 > a:hover:before {   
  2.       visibility: visible;   
  3.       -webkit-transform: scaleX(1);   
  4.       transform: scaleX(1);   
  5. }  

大功告成！

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

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

相關文章

  • CSS3制作hover下劃線動畫

    本文主要介紹了CSS3制作hover下劃線動畫的方法步驟。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-27

  • CSS3簡單帶下劃線跟隨下拉菜單特效源碼

    這是一套使用純CSS3制作的帶下劃線跟隨效果的下拉菜單特效的代碼，通過CSS3 transform和transition來制作。歡迎下載使用
    2016-10-17

  • CSS中的下劃線text-decoration屬性使用進階

    這篇文章主要介紹了CSS中的下劃線text-decoration屬性使用進階,文章前面則使用摘自w3cschool的基本使用知識進行小回顧,需要的朋友可以參考下
    2015-08-12

  • CSS3實現下劃線跟隨動畫且背景色漸變菜單源碼

    一款CSS3實現的動畫菜單，這款菜單的特點就是有一條下劃線跟隨鼠標移動，當鼠標滑過菜單項時，下劃線跟隨動畫就會出現，并對當前激活的菜單項進行下劃線加粗。此外，菜單項
    2014-06-19

  • div css布局命名時盡量避免下劃線

    用過CSS hack的朋友應該知道，用下劃線命名也是一種hack，如使用_style這樣的命名，可以讓IE外的大部分瀏覽器忽略這個樣式的定義。這篇文章主要為大家介紹了css布局命名時
    2014-06-16

  • 使用CSS去掉網頁中超鏈接的下劃線示例

    下面為大家展示一個實例：未被點擊時超鏈接文字無下劃線，顯示為藍色；當鼠標在鏈接上時有下劃線，鏈接文字顯示為紅色；當點擊鏈接后，鏈接無下劃線，顯示為綠色，感興趣的
    2013-06-21

  • 不可思議的CSS導航欄下劃線跟隨效果

    這篇文章主要介紹了純CSS實現導航欄下劃線跟隨效果，本文圖文并茂實例代碼詳解，給大家介紹的非常詳細，需要的朋友參考下吧
    2019-12-09

最新評論