html文字掃光特效

gzwnzss888

HTML內(nèi)：

1. <div class="music-title">你的文字內(nèi)容</div>

復(fù)制代碼

CSS：

1. <style scoped>
   
2.     .music-title{
   
3.         color: #040404;
   
4.         background-image: -webkit-linear-gradient(left,
   
5.         #FEFDFC,
   
6.         #070707 25%,
   
7.         #070707 50%,
   
8.         #070707 75%,
   
9.         #070707 100%);
   
10.         -webkit-text-fill-color: transparent;
    
11.         -webkit-background-clip: text;
    
12.         -webkit-background-size: 150% 100%;
    
13.         -webkit-animation: masked-animation 5s infinite linear;
    
14.     }
    
15. 
    
16.     @-webkit-keyframes masked-animation {
    
17.         0% {
    
18.             background-position: 0 0;
    
19.         }
    
20.         100% {
    
21.             background-position: -100% 0;
    
22.         }
    
23.     }
    
24. </style>

復(fù)制代碼