欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

鏈接下劃線是非常常見的一種樣式，最近做了一個(gè)非常簡(jiǎn)單的視覺效果，非常不錯(cuò)，完整代碼查看。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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)建這種效果是非常簡(jiǎn)單的，不需要添加額外的DOM元素到HTML，不過需要考慮一下瀏覽器的兼容性問題，在老舊版本的瀏覽器中它只會(huì)顯示為一個(gè)普通的下劃線。

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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，通過變換隱藏它。插入一個(gè):before并且設(shè)置它scaleX（0），保守起見，如果瀏覽器不支持，我們通過visibility: hidden隱藏它。

CSS Code復(fù)制內(nèi)容到剪貼板
  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.   

最后設(shè)置動(dòng)畫時(shí)間為0.3s，現(xiàn)在我們只需要設(shè)置元素在hover時(shí)顯示并且scaleX(1)：

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

大功告成！

這樣就完成了一個(gè)很有活力的下劃線動(dòng)畫。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • CSS3制作hover下劃線動(dòng)畫

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

  • CSS3簡(jiǎn)單帶下劃線跟隨下拉菜單特效源碼

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

  • CSS中的下劃線text-decoration屬性使用進(jìn)階

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

  • CSS3實(shí)現(xiàn)下劃線跟隨動(dòng)畫且背景色漸變菜單源碼

    一款CSS3實(shí)現(xiàn)的動(dòng)畫菜單，這款菜單的特點(diǎn)就是有一條下劃線跟隨鼠標(biāo)移動(dòng)，當(dāng)鼠標(biāo)滑過菜單項(xiàng)時(shí)，下劃線跟隨動(dòng)畫就會(huì)出現(xiàn)，并對(duì)當(dāng)前激活的菜單項(xiàng)進(jìn)行下劃線加粗。此外，菜單項(xiàng)
    2014-06-19

  • div css布局命名時(shí)盡量避免下劃線

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

  • 使用CSS去掉網(wǎng)頁中超鏈接的下劃線示例

    下面為大家展示一個(gè)實(shí)例：未被點(diǎn)擊時(shí)超鏈接文字無下劃線，顯示為藍(lán)色；當(dāng)鼠標(biāo)在鏈接上時(shí)有下劃線，鏈接文字顯示為紅色；當(dāng)點(diǎn)擊鏈接后，鏈接無下劃線，顯示為綠色，感興趣的
    2013-06-21

  • 不可思議的CSS導(dǎo)航欄下劃線跟隨效果

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

最新評(píng)論