下劃線它只用到了CSS的漸變背景、背景大小調(diào)整、位置設(shè)置、鼠標(biāo)hover 過渡等基本屬性和技巧。

分析與實現(xiàn)

我們先看一下基本的結(jié)構(gòu)。

  <h2 class="title">
    <span>你好啊，嘴巴嘟嘟</span>
  </h2>

然后我們給span 元素添加一個線性漸變背景。

 .title span{
    background: linear-gradient(to right,#ec685c,#61c454);
}

你會發(fā)現(xiàn)行盒的背景是可以跟隨文字換行的。

我們再來改變一下背景圖的大小。

.title span{
      background: linear-gradient(to right,#ec685c,#61c454);
      background-size: 100px;
    }

背景圖重復(fù)了，我們將背景圖設(shè)置no-repeat 讓背景圖不重復(fù)。

 .title span{
      background: linear-gradient(to right,#ec685c,#61c454) no-repeat;
      background-size: 100% 2px;
    }

靜態(tài)的效果已經(jīng)實現(xiàn)了。

我們需要的是，鼠標(biāo)移入的時候背景從左邊出來，也就是說最開始背景的寬度是0，鼠標(biāo)移入后寬度逐漸變成100%，我們給這個變化過程加一個過渡時間。

.title span{
      background: linear-gradient(to right,#ec685c,#61c454) no-repeat;
      background-size: 0 2px;
      transition: background-size 1000ms;
    }
    .title span:hover{
      background-size: 100% 2px;
    }

我們會發(fā)現(xiàn)進(jìn)去的時候是從左邊出來的，但是退出的時候應(yīng)該是從右邊退出才對。

那你思考一下，影響背景位置的是什么？不就是設(shè)置的位置嗎。

我們看之前設(shè)置的位置left bottom 靠左靠下。

所以說背景圖進(jìn)出都是靠左的，我們要的是出來的時候靠左，退出的時候靠右。

那我們直接給span 設(shè)置right 靠右行不行？顯然是不行的，那樣進(jìn)出都靠右了。

我們再思考一下，他是何時出現(xiàn)，何時退出的？

很明顯是hover的時候出現(xiàn)，鼠標(biāo)離開的時候退出，那么就是說，hover的時候應(yīng)該靠左，離開的時候靠右，那離開的時候也就是自己span 的初始值。

我們來試一下。

  .title span{
      background: linear-gradient(to right,#ec685c,#61c454) no-repeat right bottom;
      background-size: 0 2px;
      transition: background-size 1000ms;
    }
    .title span:hover{
      background-position-x: left;
      background-size: 100% 2px;
    }

好了，這樣我們的效果就實現(xiàn)了。文章來源地址http://www.zghlxwxcb.cn/news/detail-620091.html

到了這里，關(guān)于一個CSS漸變下劃線效果的實用技巧的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！