这一次同样是用css来实现了一个聚光灯效果的一个样式。
效果链接：聚光灯效果
以下是该效果的具体实现，以及一些总结。
首先就是文字部分是由两层。底层部分设置颜色为灰色，第二层就套上你想要的颜色，我这里选择了黄色。（与文字内容相呼应hhh）然后再在第二层的文字上套上遮罩来实现一个聚光灯效果。为了让HTML的结构更加简洁，第二层内容用伪类元素来实现。以下是HTML部分的代码：
<h1 data-lightmove="StephenCurry">StephenCurry</h1>
看吧，这样的HTML结构就十分的简洁。其中的data-lightmove是用来设置第二层内容的。在伪类元素中的content属性可以直接利用attr获取元素的属性，将其插入到对应位置。
h1::after {content: attr(data-lightmove);}
这样就可以获取到data-lightmove的值“StephenCurry”来添加到h1之后。
然后通过设定让两层内容完全重合。即子绝父相来定位。然后在第二层内容上面添加一个遮罩。用clip-path来实现。clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
-webkit-clip-path: ellipse(110px 110px at 0% 50%);clip-path: ellipse(110px 110px at 0% 50%);
这里为了兼容问题，加上了-webkit-clip-path版本。这样即是裁剪了一个半径为110px的圆在该元素的最左边。（ellipse是用来定义椭圆的）。
然后通过改变该遮罩的位置来实现一个聚光灯效果。添加一个@keyframes来实现。
@keyframes lightmove {0% {-webkit-clip-path: ellipse(110px 110px at 0% 50%);clip-path: ellipse(110px 110px at 0% 50%);}50% {-webkit-clip-path: ellipse(110px 110px at 100% 50%);clip-path: ellipse(110px 110px at 100% 50%);}100% {-webkit-clip-path: ellipse(100px 100px at 0% 50%);clip-path: ellipse(100px 100px at 0% 50%);}}
即是在最左边，中间和最右边来改变其遮罩位置。最后再在第二层内容里面加上一个animation就可以了。
animation: lightmove 5s infinite;
这样就实现了一个聚光灯的效果。
所有的css代码如下：
body {font-size: 18px;background: #0f2027; /* fallback for old browsers */background: -webkit-linear-gradient(to left,#2c5364,#203a43,#0f2027); /* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to left,#2c5364,#203a43,#0f2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */display: flex;justify-content: center;align-items: center;min-height: 100vh;}h1 {font-size: 8rem;color: #333;position: relative;}h1::after {content: attr(data-lightmove);color: yellow;position: absolute;top: 0px;left: 0px;-webkit-clip-path: ellipse(110px 110px at 0% 50%);clip-path: ellipse(110px 110px at 0% 50%);animation: lightmove 5s infinite;}@keyframes lightmove {0% {-webkit-clip-path: ellipse(110px 110px at 0% 50%);clip-path: ellipse(110px 110px at 0% 50%);}50% {-webkit-clip-path: ellipse(110px 110px at 100% 50%);clip-path: ellipse(110px 110px at 100% 50%);}100% {-webkit-clip-path: ellipse(100px 100px at 0% 50%);clip-path: ellipse(100px 100px at 0% 50%);}}
