今天依靠纯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标签
