CSS制作舞台聚光灯效果

今天依靠纯CSS来制作一个舞台聚光灯效果，先看效果图

			html{
				font-size: 15px;
			}
			body{
				background-color: #222;
				/* 为body设置使我们的h1垂直水平居中 */
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
			}
			h1{
				color: #333;
				font-family: Helvetica;
				margin: 0;
				padding: 0;
				font-size: 8rem;
				position: relative;
			}
			h1::after{
				/* 我们看到的文字其实是h1的伪类内容 */
				content: "Counter-Strike";
				color: rgb(204, 0, 0);
				/* 我们使伪类和原内容保持重叠 */
				position: absolute;
				top: 0;
				right: 0;
				/* 然后下面这个属性是以一个形状来切割显示部分 我们这里使用圆形 */
				-webkit-clip-path: ellipse(100px 100px at 0% 50%);
				clip-path: ellipse(100px 100px at 0% 50%);
				/* 播放这个spotlight动画5s一次 无限重复 */
				animation: spotlight 5s infinite;
			}
			@keyframes spotlight {
				/* 然后动画部分可以看做是切割圆形部分从左向右再向左 */
				0%{
					-webkit-clip-path: ellipse(100px 100px at 0% 50%);
					clip-path: ellipse(100px 100px at 0% 50%);
				}
				/* 过程动画则是在右边所以我们的圆心改为100% 50% */
				50%{
					-webkit-clip-path: ellipse(100px 100px at 100% 50%);
					clip-path: ellipse(100px 100px at 100% 50%);
				}
				/* 所以0和100的动画都是在左边 */
				100%{
					-webkit-clip-path: ellipse(100px 100px at 0% 50%);
					clip-path: ellipse(100px 100px at 0% 50%);
				}
			}

注释和思路都写在代码中了 HTML部分就是一个H1标签