用CSS3做个文字聚光灯效果

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

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

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

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

2、再来写下基本样式

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

3、再来就是关键部分了

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