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

HTML代码

1. <p><div></p><p>    <p></p><p>        灵歆论坛：http://www.6665q.com</p><p>    </p></p><p></div></p>

复制代码

CSS代码

1. <style type="text/css">
   
2.     body {
   
3.         margin: 0;
   
4.         padding: 0;
   
5.         background-color: #2f2424;
   
6.     }
   
7.     div {
   
8.         margin: 400px auto;
   
9.         font-size: 40px;
   
10.         text-align: center;
    
11.     }
    
12.     p {
    
13.         margin: 0;
    
14.         background: -webkit-linear-gradient(left,
    
15.             #ffffff,
    
16.             #ff0000 6.25%,
    
17.             #ff7d00 12.5%,
    
18.             #ffff00 18.75%,
    
19.             #00ff00 25%,
    
20.             #00ffff 31.25%,
    
21.             #0000ff 37.5%,
    
22.             #ff00ff 43.75%,
    
23.             #ffff00 50%,
    
24.             #ff0000 56.25%,
    
25.             #ff7d00 62.5%,
    
26.             #ffff00 68.75%,
    
27.             #00ff00 75%,
    
28.             #00ffff 81.25%,
    
29.             #0000ff 87.5%,
    
30.             #ff00ff 93.75%,
    
31.             #ffff00 100%);
    
32.         -webkit-background-clip: text;
    
33.         -webkit-text-fill-color: transparent;
    
34.         background-size: 200% 100%;
    
35.         animation: masked-animation 2s infinite linear;
    
36.     }
    
37.     @keyframes masked-animation {
    
38.         0% {
    
39.             background-position: 0 0;
    
40.         }
    
41.         100% {
    
42.             background-position: -100%, 0;
    
43.         }
    
44.     }
    
45. </style>

复制代码

代码实现原理：

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

1、animation 属性

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

2、@keyframes 规则。

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

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

3、linear-gradient() 函数

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

CSS 跑马灯(流光)字体特效代码示例

下载地址：https://lx888.lanzoux.com/iQMWsikuhdi