html文本框中加入跑马灯,CSS html文字的跑马灯(流光)特效

在网页的合适位置，放一些带有跑马灯特效的文字肯定会吸引访客的眼球的。今天这篇博文就写一写利用纯CSS来实现网页中文字跑马灯特效的案例。

在CSS3出现以前，如果要制作一段流光文字必须借助图片，但现在我们直接可以利用CSS代码来实现了，省时又少力，还能加快前端网页的加载速，省资源啊。先看效果图：

CSS3实现文字跑马灯(流光)效果

HTML代码

飞鸟慕鱼博客：http://www.feiniaomy.com

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 3