妙用 background 实现花式文字效果

background-size: 100% 3px;

color: #000;

}

我们虽然，设定了 background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff)，但是一开始默认它的 background-size: 0 3px，也就是一开始是看不到下划线的，当 hover 的时候，改变 background-size: 100% 3px，这个时候，就会有一个 0 3px 到 100% 3px 的变换，也就是一个从无到有的伸展效果。

看看最后的效果：

由于设定的 background-position 是 0 100%，如果，设定的 background-position 是 100% 100%，我们可以得到一个反向的效果：

// 其他都保持一致，只改变 background-position，从 0 100% 改为 100% 100%

a {

…

background-position: 100% 100%;

…

}

再看看效果，你可以对比着上面的动图看看具体的差异点在哪：

CodePen Demo – background underline animation

OK，如果我们使用 background 实现两条重叠的下划线，再利用上述的两个不同的 background-position 值，我们就可以得到一个更有意思的下划线 hover 效果。

CSS 代码示意，注意看两条使用 background 模拟的下划线的 background-position 的值是不一样的：

a {

background:

linear-gradient(90deg, #0cc, #0cc),

linear-gradient(90deg, #ff3c41, #fc0, #8500d8);

background-size: 100% 3px, 0 3px;

background-repeat: no-repeat;

background-position: 100% 100%, 0 100%;

transition: 0.5s all;

color: #0cc;<