HTML
1 2 3
| <div class="masked"><p> 文字 </span></p></div>
|
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| .masked p { display:block;
background-image:-webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db); color:transparent;
-webkit-text-fill-color:transparent; -webkit-background-clip:text; -webkit-background-size:200% 100%;
background-size:200% 100%;
-webkit-animation:masked-animation 4s infinite linear; } @keyframes masked-animation { 0% { background-position:0 0;
} 100% { background-position:-100% 0; } }@-webkit-keyframes masked-animation { 0% { background-position:0 0; } 100% { background-position:-100% 0; } }
|