代码伺候：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
overflow: hidden;
background-color: black;
text-align: center;
}
h1{
display: inline-block;
font:bold 70px '微软雅黑';
color: rgba(128,128,128,0.3);
/* 一定要设置文字透明 否则会覆盖背景 即 覆盖光斑 */
/* 渐变其实就是背景图片 */
margin-top: 50px;
background-image: linear-gradient(120deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 160px,rgba(255,255,255,0) 230px);
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: -webkit-text;
}
</style>
</head>
<body>
<h1>
atshang尚硅谷
</h1>
<script>
var h1= document.querySelector("h1");
var flag = -200;
setInterval(function(){
flag += 10;
if(flag > 600){
flag = -200;
}
h1.style.backgroundPosition = flag + "px";
},50);
</script>
</body>
</html>
总结：
渐变其实就是背景图片