html纯CSS样式实现文字的跑马灯(流光)特效

html纯CSS样式实现文字的跑马灯(流光)特效 

HTML代码

    

        于飞SEO
    

CSS代码

代码实现原理：

以上代码中，使用了CSS中的 animation 属性，linear-gradient()函数，以及 @keyframes 规则来实现的

1、animation 属性

animation：是CSS3中新增的属性，它可以制作出多种酷炫的动画效果，如果对flash有一定的了解，那这个属性就会很容易学习。

2、@keyframes 规则。

@keyframes：能够将一套 CSS 样式逐渐变化为另一套样式，来实现动画的效果。

0% 是动画的开始时间，100% 动画的结束时间。

3、linear-gradient() 函数

linear-gradient() 函数用于创建一个线性渐变的 "图像"。