1.实现原理 通过背景渐变 画出光斑范围 后通过 -webkit-background-clip: text 进行文字填充
直接上代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 html,body{ 12 background-color: black; 13 overflow: hidden; 14 height: 100%; 15 text-align: center; 16 } 17 h1{ 18 margin-top: 50px; 19 font:bolder 80px "微软雅黑"; 20 display:inline-block; 21 color: rgba(255,255,255,.3); 22 /*背景渐变效果*/ 23 background: linear-gradient(120deg,rgba(255,255,255,0) 60px,rgba(255,255,255,1) 120px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 240px); 24 /*背景不平铺*/ 25 background-repeat: no-repeat; 26 /*文字填充*/ 27 -webkit-background-clip: text; 28 } 29 30 </style> 31 </head> 32 <body> 33 <h1>你好呀小菜鸟</h1> 34 35 36 <script type="text/javascript"> 37 var h1=document.querySelector("h1"); 38 var flag=-180; 39 //鼠标移入 40 41 window.setInterval(function(){ 42 flag+=10; 43 if(flag==480){ 44 flag=-180; 45 } 46 h1.style.backgroundPositionX=flag+"px"; 47 },60) 48 49 50 </script> 51 </body> 52 </html>
原文：https://www.cnblogs.com/FzwBlog/p/12463067.html