CSS实现聚光灯特效

先来看一下效果：

 实现原理：将两个SpotLight文字完全重叠，后面那个是深灰色，前面的是亮颜色的，再将前面的文字套用圆形遮罩，最后加上CSS Animation就可以了。如果要实现渐变色，只需给伪元素添加渐变背景图片，将文字颜色设成透明，然后使用background-clip：text属性设置背景的裁剪区域即可

主要应用到的 CSS 属性包括：

•  ::after
• clip-path 
• @keyframes & animation 
• attr() 
• background-clip

::after :选择器向选定元素的最后子元素后面插入内容

clip-path:使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。其中ellipse属性表示定义一个椭圆

@keyframes：通过在动画序列中定义关键帧（或 waypoints）的样式来控制 CSS 动画序列中的中间步骤

attr()：返回选择元素的属性值，一般与content搭配使用

background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。其中text属性表示背景被裁剪成文字的前景色

最后附上源码：

  
  
  
  
  


  
SpotLight