css 是你永远学不会的语言——css 实现下划线动画

1. 前言

CSS 几乎是前端必学的一门语言，相信大家在编写 web 页面时，都会感叹 CSS 的强大和它的简单易用。

我说 CSS 是一门学不会的语言，不知大家有何看法？相信大部分人都与我持不同意见，不过我得说一下，CSS 虽然简单，但是它也不简单，是不是如听一席话？哈哈~

下面回到标题提高的下划线动画实现，我们来看一下下面的这个效果：

不知道大家会如何实现这个效果，如果你说用 js 能实现，那你千万别划走，请认真听讲。下面这个效果如果用 js 来实现，那估计得难到天上去了。噫吁戲，危乎高哉了，js 之难，难于上青天。

这两个 GIF 中包含的 CSS 代码并不多，简简单单的七八行代码就能实现，相信有思路的小伙伴已经开始上手实现了。下面我们就讲一下如何实现这个效果哈。

2. 实现

首先讲一下它的实现原理：使用元素的背景图来实现，通过控制背景图的 background-size 属性来实现。

完整的代码如下：

<style>
    span {
        line-height: 2;
        background: -webkit-linear-gradient(left, #12c2e9, #c471ed, #f64f59) no-repeat right bottom;
        background-size: 0% 2px;
        transition: background-size 500ms linear;
    }

    span:hover {
        background-position-x: left;
        background-size: 100% 2px;
    }

</style>


<span>看看您错过了上个月 Google Open Source Live 活动中的哪些精彩内容。了解使用 Istio 观测您的服务、分析流经服务网格的请求等话题！</span>

这里多嘴一句，CSS 属性 line-height 的后面如果跟的是数字，则以 1 em 为基准进行计算，例如 line-height: 1 的效果相当于 line-height: 1em;

可以看到我们使用 background-position: right bottom 将背景在过渡前定位到 span 元素的右下角，但是在鼠标触发 span 元素的 hover 时，我们又将 span 元素的 CSS 属性 background-position-x 变为 left，这样就能实现下划线（也就是元素的背景图片）左进右出的效果。

然后我们设置 CSS 属性 background-size， 开始时为 0，鼠标触发 hover 时则为 100%，这里主要是控制背景图片水平方向上的尺寸，而 span 元素的背景图片在数值方向上的尺寸并没有变化。

相关的实现细节：

• 我们通过控制元素的 background-position-x 属性来实现背景图片左进右出的效果。
• 我们通过控制元素的 background-size 属性让下划线（背景图片）看起来像是从左往右地进入，实际上只是元素的背景图片水平尺寸变长了而已。