在网页的合适位置，放一些带有跑马灯特效的文字肯定会吸引访客的眼球的。今天这篇博文就写一写利用纯CSS来实现网页中文字跑马灯特效的案例。
在CSS3出现以前，如果要制作一段流光文字必须借助图片，但现在我们直接可以利用CSS代码来实现了，省时又少力，还能加快前端网页的加载速，省资源啊。
先看效果图：
CSS3实现文字跑马灯(流光)效果
HTML代码
<div> <p> 免费资源网：http://www.freexyz.cn </p> </div>
CSS代码
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: #2f2424;
}
div {
margin: 400px auto;
font-size: 40px;
text-align: center;
}
p {
margin: 0;
background: -webkit-linear-gradient(left,
#ffffff,
#ff0000 6.25%,
#ff7d00 12.5%,
#ffff00 18.75%,
#00ff00 25%,
#00ffff 31.25%,
#0000ff 37.5%,
#ff00ff 43.75%,
#ffff00 50%,
#ff0000 56.25%,
#ff7d00 62.5%,
#ffff00 68.75%,
#00ff00 75%,
#00ffff 81.25%,
#0000ff 87.5%,
#ff00ff 93.75%,
#ffff00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
animation: masked-animation 2s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100%, 0;
}
}
</style>
代码实现原理：
以上代码中，使用了CSS中的 animation 属性，linear-gradient()函数，以及 @keyframes 规则来实现的
1、animation 属性
animation：是CSS3中新增的属性，它可以制作出多种酷炫的动画效果，如果对flash有一定的了解，那这个属性就会很容易学习。
2、@keyframes 规则。
@keyframes：能够将一套 CSS 样式逐渐变化为另一套样式，来实现动画的效果。
0% 是动画的开始时间，100% 动画的结束时间。
3、linear-gradient() 函数
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
在线演示：https://demo.freexyz.cn/201910/%E8%B7%91%E9%A9%AC%E7%81%AF.html
