CSS聚光灯效果

效果图如下

主要思路

  • 使用::after创建与原文本同区域位置的文字
  • clip-path ellipse 裁剪创建元素的可显示区域
  • 动画执行裁剪区域
  • background-clip:text 以区块内的文字作为裁剪区域向
    外裁剪,文字的背景即为区块的背景,文字之外的区
    域都将被裁剪掉,将文字设置为 transparent

代码如下





    
    
    focus
    




    

codingchangelife

你可能感兴趣的:(CSS聚光灯效果)