背景剪裁
語法：background-clip: border-box || padding-box || context-box || no-clip || text
本次用到的就是: -webkit-background-clip:text;（谷歌瀏覽器）
示例：從局部到全局漸變
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字漸變動畫</title> 6 <style> 7 .slideShine{ 8 9 background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0; 10 11 background-size:20% 100%; 12 13 -webkit-background-clip: text; 14 15 -webkit-text-fill-color: transparent; 16 17 font-size: 36px; 18 19 text-align: center; 20 21 font-weight: bold; 22 23 text-decoration: underline; 24 25 } 26 27 .slideShine {-webkit-animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;} 28 29 @-webkit-keyframes slideShine { 30 31 0% { 32 33 background-position: 0 0; 34 35 } 36 37 100% { 38 39 background-position: 100% 100%; 40 41 } 42 43 } 44 45 @keyframes slideShine { 46 47 0% {background-position: 0 0; } 48 49 100% {background-position: 100% 100%; } 50 51 } 52 </style> 53 54 </head> 55 <body> 56 57 <p class="slideShine" >→css3文字漸變動畫效果 >></p> 58 59 60 </body> 61 </html>
效果圖：
這是一個動態的圖片，截屏如上圖所示。
說明：
-webkit-text-fill-color: transparent;(這里必須填充透明顏色，這樣漸變的顏色才會填充到文字上面，去掉這個或者填充別的顏色，效果不明顯)
檢索或設置對象中的文字填充顏色，若同時設置 <' text-fill-color '> 和 <' color '>，<' text-fill-color '> 定義的顏色將覆蓋 <' color '> 屬性；
希望有所幫助！！！