纯CSS文字聚光灯效果~#web前端 聚光灯wps

这个视频用CSS来写聚光灯的效果，大家可以先想一下思路。

·来看一下代码，这里就写了一个h1标签，还有一些基本的样式。

·先来看下布局，这里需要把hello world多准备一份，可以直接复制一份h1或者添加一个伪元素，保持html结构简洁一点。

·<htmicontent里面可以直接把hello world写在里面，或者用之前说的attr()属性获取函数，然后定义一个data-text属性，在h1里面就来定义这个属性，再把hello world放在里面，这样子也可以，再给它定一下位。

·现在这两个hello world通过定位重叠在一起了，然后要对伪元素的hello world裁切一小部分出来。

·这里用clip-path属性裁一个小圆出来用circle，半径大小为100像素，位置在水平的最左边。现在只是显示了水平最左边的这小部分了，把它调到中间位置看一下。

·是不是可以通过一个动画控制它水平方向的值就可以了？来写个动画，这里设置三个区间，一开始的时候是在最左边的，100%的时候也是回到最左边，50%的时候就去到最右边，这里改成100%就可以了。

·来绑定一下动画，聚光灯的效果其实就已经完成了，但是背景不怎么好看，给它加一个渐变的背景。

·这里准备了一张比较好看的渐变背景图，再给它放大一点，背景图是出来了，但是要让背景只是显示在文字里面，这里就要对背景进行裁切，让它按照文本来裁切。

·现在背景其实已经裁出来了，只是因为字体颜色把背景给挡住了，把字体的颜色改成透明就可以了，动画的时间稍微改长一点。

聚光灯的效果就完成了。

这个视频就到这里，感谢大家的收看。