HTML+CSS实现聚光灯效果无JS YYishare

无JS，纯CSS实现聚光灯效果。html和css如下。

效果图：

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>聚光灯效果</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		
	</head>
	<body>
		<h1>SPOTLIGHT</h1>
	</body>
</html>

CSS代码：

*{
	margin: 0;
	padding: 0;
}
body{
	background: #222;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
h1{
	color: #333;
	font-size: 8rem;
	position: relative;
}
h1::after{
	content: "SPOTLIGHT";
	color: transparent;
	position: absolute;
	left: 0;
	top: 0;
	background: -webkit-linear-gradient(left,#c23616,#192a56,#00d2d3,yellow,
	#6D214f,#2e86de,#4cd137,#e84118);
	background-clip: text;
	-webkit-background-clip: text;
	clip-path: circle(100px at 0% 50%);
	-webkit-clip-path: circle(100px at 0% 50%);
	animation: light 5s infinite;
}
@keyframes light{
	0%{
		clip-path: circle(100px at 0% 50%);
		-webkit-clip-path: circle(100px at 0% 50%);
	}
	50%{
		clip-path: circle(100px at 100% 50%);
		-webkit-clip-path: circle(100px at 100% 50%);
	}
	100%{
		clip-path: circle(100px at 0% 50%);
		-webkit-clip-path: circle(100px at 0% 50%);
	}
}