开机时的光斑动画 CSS

代码伺候：
<!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>
总结：
渐变其实就是背景图片