一个CSS渐变下划线效果的实用技巧

下划线它只用到了CSS的渐变背景、背景大小调整、位置设置、鼠标hover 过渡等基本属性和技巧。

分析与实现

我们先看一下基本的结构。

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

然后我们给span 元素添加一个线性渐变背景。

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

你会发现行盒的背景是可以跟随文字换行的。

我们再来改变一下背景图的大小。

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

背景图重复了，我们将背景图设置no-repeat 让背景图不重复。

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

静态的效果已经实现了。

我们需要的是，鼠标移入的时候背景从左边出来，也就是说最开始背景的宽度是0，鼠标移入后宽度逐渐变成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;
    }

我们会发现进去的时候是从左边出来的，但是退出的时候应该是从右边退出才对。

那你思考一下，影响背景位置的是什么？不就是设置的位置吗。

我们看之前设置的位置left bottom 靠左靠下。

所以说背景图进出都是靠左的，我们要的是出来的时候靠左，退出的时候靠右。

那我们直接给span 设置right 靠右行不行？显然是不行的，那样进出都靠右了。

我们再思考一下，他是何时出现，何时退出的？

很明显是hover的时候出现，鼠标离开的时候退出，那么就是说，hover的时候应该靠左，离开的时候靠右，那离开的时候也就是自己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;
    }

好了，这样我们的效果就实现了。