在网页的合适位置，放一些带有跑马灯特效的文字肯定会吸引访客的眼球的。今天这篇博文就写一写利用纯CSS来实现网页中文字跑马灯特效的案例。
在CSS3出现以前，如果要制作一段流光文字必须借助图片，但现在我们直接可以利用CSS代码来实现了，省时又少力，还能加快前端网页的加载速，省资源啊。先看效果图：
CSS3实现文字跑马灯(流光)效果
HTML代码
飞鸟慕鱼博客：
CSS代码
body{
margin:0;
padding:0;
background-color:#2f2424;
}
div{
margin:400pxauto;
font-size:40px;
text-align:center;
}
p{
margin:0;
background:-webkit-linear-gradient(left,
#ffffff,
#ff00006.25%,
#ff7d0012.5%,
#ffff0018.75%,
#00ff0025%,
#00ffff31.25%,
#0000ff37.5%,
#ff00ff43.75%,
#ffff0050%,
#ff000056.25%,
#ff7d0062.5%,
#ffff0068.75%,
#00ff0075%,
#00ffff81.25%,
#0000ff87.5%,
#ff00ff93.75%,
#ffff00100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-size:200%100%;
animation:masked-animation2sinfinitelinear;
}
@keyframesmasked-animation{
0%{
background-position:00;
}
100%{
background-position:-100%,0;
}
}
代码实现原理：
以上代码中，使用了CSS中的 animation 属性，linear-gradient()函数，以及 @keyframes 规则来实现的
1、animation 属性
animation：是CSS3中新增的属性，它可以制作出多种酷炫的动画效果，如果对flash有一定的了解，那这个属性就会很容易学习。
2、@keyframes 规则。
@keyframes：能够将一套 CSS 样式逐渐变化为另一套样式，来实现动画的效果。
0% 是动画的开始时间，100% 动画的结束时间。
3、linear-gradient() 函数
linear-gradient() 函数用于创建一个线性渐变的 "图像"。
CSS 跑马灯(流光)字体特效代码示例平台:所有平台|分类:编程开发|大小:0.1MB
