一个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;
    }

一个CSS渐变下划线效果的实用技巧_第1张图片

背景图重复了,我们将背景图设置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;
    }

在这里插入图片描述
好了,这样我们的效果就实现了。

你可能感兴趣的:(css,前端)