这篇文章主要介绍了CSS html文字的跑马灯(流光)特效 ，在开发过程应该对大家很有帮助，小编结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
在网页的合适位置，放一些带有跑马灯特效的文字肯定会吸引访客的眼球的。今天这篇博文就写一写利用纯CSS来实现网页中文字跑马灯特效的案例。
在CSS3出现以前，如果要制作一段流光文字必须借助图片，但现在我们直接可以利用CSS代码来实现了，省时又少力，还能加快前端网页的加载速，省资源啊。
先看效果图：
CSS3实现文字跑马灯(流光)效果
HTML代码
<div> <p> ：http://www.feiniaomy.com </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() 函数用于创建一个线性渐变的 "图像"。
[Downloads]下载内容[/Downloads]
到此这篇关于CSS html文字的跑马灯(流光)特效 就介绍到这了。把花融进心海，有一句是为你心开，把祝福散落人海，有一种是为你归来，把温暖折成花海，有一朵是为你存在。大雪节气到来，好运来。更多相关CSS html文字的跑马灯(流光)特效 内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
