来分享个聚光灯动画,先看看效果
先来准备下知识点:
主要是background-clip: text;和clip-path,这两个遮罩属性
1、先来搭建一下HTML结构吧
HMTL这侧很简单,只需要一段文字。
2、再来写下基本样式
让整个文字处于屏幕中间,背景黑色。
3、再来就是关键部分了
(这里我用了伪元素让他于父元素完全重合,如果不想看文字有个底色的话,可以不用伪元素,直接写在p身上就可以,我这是因为最先是做了底色的,所以用的伪元素。)
首先给一个背景颜色,这里是用的渐变,好看些,然后让文字的颜色是背景颜色,background-clip: text;这个属性就是要以文字为