怎样利用CSSbackground系列属性实现一些花式的文字效果

怎样利用CSS background系列属性实现一些花式的文字效果，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联建站专注于企业网络营销推广、网站重做改版、天祝藏族自治网站定制设计、自适应品牌网站建设、H5场景定制、商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为天祝藏族自治等各大城市提供网站开发制作服务。

如何利用CSS实现花式文字效果？

起因

写本文的动机是在于，某天，被这样一个标题所吸引 -- 10 Masterfully Designed Websites，其中列举了 10 个极具创意的 Web 网站。

其中一个 Red Bull Racing 网站，是介绍关于 F1 红牛车队的主页。其中有这样一个非常有意思的 Hover 动画效果：

这个文字的 hover 出现效果，看似简单，其实想要完全实现它，仅仅依靠 CSS 是非常复杂的，其中一个比较难的地方在于 -- 如何让一个效果，逐渐作用给整段文字中的部分，而不是一次将整个效果赋予整段文本。

利用 background 实现文字的下划线效果

到这里，我想起了之前在这篇文章中 -- CSS 文字装饰 text-decoration & text-emphasis，我介绍的一种 使用 background 模拟下划线的效果。

看个简单的 DEMO，使用 background 模拟文字的下划线效果：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

p {
    width: 600px;
    font-size: 24px;
    color: #666;
}
a {
    background: linear-gradient(90deg, #0cc, #0cc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    color: #0cc;
}

使用 background 模拟文字的下划线效果，效果图如下：

又或者，使用 background 模拟虚线下划线：

a {
    background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 100% 100%;
}

CodePen Demo -- 使用 background 模拟下划线与虚线下划线

https://codepen.io/Chokcoco/pen/YzNQKwm

当然这个是最基础的，巧妙的运用 background 的各种属性，我们实现各种有意思的效果。

巧妙改变 background-size 与 background-position 实现文字 hover 动效

这里，通过巧妙改变 background-size 与 background-position 属性，我们可以实现一些非常有意思的文字 hover 效果。

先看这样一个 Demo，核心代码作用于被

标签包裹的 标签之上：

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 0 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: 1s all;
    color: #0cc;
}

a:hover {
    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 下划线动画

https://codepen.io/Chokcoco/pen/QWdgLwp

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;
}
a:hover {
    background-size: 0 3px, 100% 3px;
    color: #000;
}

可以得到这样一种效果，其实每次 hover， 都有两条下划线在移动：

CodePen Demo -- background 下划线动画

https://codepen.io/Chokcoco/pen/MWJogjQ

通过 background-size 与 background-position 配合 background-clip 实现文字的渐现

上述一大段都在围绕 -- 下划线。

回归到本文一开始提到的 Gif 效果，我们能否实现在一段文字中，实现文字的渐现效果呢？

上述技巧利用的是 background，那么 background 背景色能否改变文字的颜色的？答案是可以的，只需要借助 background-clip。

我们稍微改造下代码，实现利用 background-clip 实现 hover 的时候部分文字逐渐改变颜色：

Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, 
molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.

p {
    color: #666;
    cursor: pointer;
}

a {    
    background: linear-gradient(90deg, #fc0, #fc0);
    background-size: 0 100px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-clip: text;
    transition: .6s all linear;
}

p:hover a {
    background-size: 100% 100%;
    color: transparent;
}

看看效果，通过 background-clip: text 的遮罩裁剪，我们将 background: linear-gradient(90deg, #fc0, #fc0) 背景色作用给了文字，同时利用 color: transparent 让文字展示出背景色的色值：

CodePen Demo --  background-size 与 background-position 以及 background-clip 实现文字逐个渐现

https://codepen.io/Chokcoco/pen/qBjmvdq?editors=1100

当然，稍微对上述代码变形，我们就可以演化出几种不同的效果。

实现整段文字的渐现 - 从透明到出现

第一种就是从透明到有颜色，逐渐展现，这里我们只需要让 color 一直是 transparent 即可（下述效果借助了一个按钮去触发效果）：

Button