用CSS3做个文字聚光灯效果

来分享个聚光灯动画，先看看效果

先来准备下知识点：
主要是background-clip: text;和clip-path，这两个遮罩属性

1、先来搭建一下HTML结构吧

HMTL这侧很简单，只需要一段文字。

2、再来写下基本样式

让整个文字处于屏幕中间，背景黑色。

3、再来就是关键部分了

（这里我用了伪元素让他于父元素完全重合，如果不想看文字有个底色的话，可以不用伪元素，直接写在p身上就可以，我这是因为最先是做了底色的，所以用的伪元素。）
首先给一个背景颜色，这里是用的渐变，好看些，然后让文字的颜色是背景颜色，background-clip: text;这个属性就是要以文字为遮罩，直接效果就是文字颜色变成了背景色，这有个注意的，就是文字颜色要为透明，不然是看不到背景颜色的。
再来就是做一个圆形的遮罩了，就是灯照到的效果了。
clip-path: ellipse(110px 110px at 0% 50%);这就是画一个圆形，半径为110px，圆点在水平方向的最左侧，垂直方向的一半（整个元素），注意因为这两个属性都是测试属性，需要加上前缀。

4、最后就是动画让它动起来了

整个聚光灯的移动都是水平方向的，所以我们就只需要改变在水平方向的位置就可以了。

总结：
这个动画不难，只要知道理解了前面提到的两个属性，就可以做出来了，当然还得有个好看的渐变色，这就分享到这了。

————纵然是在巨人的肩膀上学习……