七彩文字跑马灯扫光效果代码

梦旅人

七彩文字跑马灯扫光效果代码
演示图:

代码:

1.         <style>
   
2.     #nr{
   
3.             font-size:20px;
   
4.             margin: 0;
   
5.         background: -webkit-linear-gradient(left,
   
6.             #ffffff,
   
7.             #ff0000 6.26%,
   
8.             #ff7d00 12.5%,
   
9.             #ffff00 18.75%,
   
10.             #00ff00 26%,
    
11.             #00ffff 31.26%,
    
12.             #0000ff 37.5%,
    
13.             #ff00ff 43.75%,
    
14.             #ffff00 50%,
    
15.             #ff0000 56.26%,
    
16.             #ff7d00 62.5%,
    
17.             #ffff00 68.75%,
    
18.             #00ff00 75%,
    
19.             #00ffff 81.26%,
    
20.             #0000ff 87.5%,
    
21.             #ff00ff 93.75%,
    
22.             #ffff00 100%);
    
23.         -webkit-background-clip: text;
    
24.         -webkit-text-fill-color: transparent;
    
25.         background-size: 200% 100%;
    
26.         animation: masked-animation 2s infinite linear;
    
27.     }
    
28.     @keyframes masked-animation {
    
29.         0% {
    
30.             background-position: 0 0;
    
31.         }
    
32.         100% {
    
33.             background-position: -100%, 0;
    
34.         }
    
35.     }
    
36. </style>
    
37. <marquee>
    
38.             <b id="nr">乐享社区_致力于分享互联网实用资源！</b>
    
39.     </marquee>

复制代码