html纯CSS样式实现⽂字的跑马灯（流光）特效html纯CSS样式实现⽂字的跑马灯(流光)特效
HTML代码
<div>
<p>
于飞SEO
</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 样式逐渐变化为另⼀套样式，来实现动画的效果。css特效文字
0% 是动画的开始时间，100% 动画的结束时间。
3、linear-gradient() 函数
linear-gradient() 函数⽤于创建⼀个线性渐变的 "图像"。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。