如何利用 background 系列属性，巧妙的实现一些花式的文字效果

1. 起因
2. 利用 background 实现文字的下划线效果
• 巧妙改变 background-size 与 background-position 实现文字 hover 动效
3. 通过 background-size 与 background-position 配合 background-clip 实现文字的渐现
• 实现整段文字的渐现 – 从透明到出现
• 实现整段文字的渐现 – 从一种颜色到另外一种颜色
4. 简单模拟题图效果
5. 完美还原题图效果
6. 结语

本文将讲解如何利用 background 系列属性，巧妙的实现一些花式的文字效果。通过本文，你将可以学到：

• 通过 background-size 与 background-position 实现酷炫的文字下划线效果
• 通过 background-size 与 background-position 以及 background-clip 实现文字逐个渐现的效果
• 通过 animation-delay 实现文字的渐现效果

起因

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

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

查看完整代码：

结语

好了，本文到此结束，希望对你有帮助，感谢阅读！