大家好，今天跟大家分享的是CSS实现灯光照射显示文字的方法，下面看下效果图：文字随着光圈的移动而显现并伴随不同角度的阴影效果。
效果图
结构分析：该效果主要由三部分组成，一是文本内容，二是光圈，三是文本背景，因为在整个黑色背景中黑色的文字是看不见的，所以要有一个类似光圈的背景置于文字后面并随着光圈的移动而移动文字才可以显现。由此可如下构建HTML：
CSS样式：
基本样式：主要是给body一个黑色的背景，然后将.box的position设置为relative。
文字部分样式：绝对定位，并设置层叠顺序z-index:1为中间层，后面将背景层设置为z-index:0为底层，光圈设置z-index:2为顶层。
光圈和背景通用样式：border-radius：75px设为边长的一半将光圈和背景设为圆形，background用了radial-gradient(径向渐变），并给一个0.8的不透明度，box-shadow用来产生光晕效果，然后通过animation引入动画。
设置背景和光圈的层叠顺序：上面已经介绍过，背景置于底层，文本置于中间层，光圈置于顶层，三者位置关系如下图所示：
位置关系
动画设置：光圈动画主要是位置偏移，文字阴影动画主要是随着光圈的移动投影方向的变化。
感兴趣的同学赶紧试试吧！