喜欢看电影的朋友一定会注意到有趣的细节。也就是说，电影制作人显然会对片头的标志部分应用一点特殊效果，在阴影流之间闪烁光线。通过提高徽标的知名度并改善其纹理，您可以一石二鸟。以华纳兄弟影业公司为例
那么，如果我们在前端世界中使用纯CSS技术，是否可以实现类似的特效呢？案当然是肯定的。这次我就以本网站的logo为例，用纯CSS技术实现光影效果，全面、简洁地讲解一下如何实现闪烁的光影效果。将鼠标悬停在图像徽标上。
通常，大多数前端开发人员选择线性渐变。此方法创建表示两种或多种颜色的线性渐变的图像。结果属于梯度数据类型，一种特殊的图像数据类型。
简单用法
/渐变轴为45度，从蓝到红渐变/线性渐变45deg，蓝到红；/从右下角到左上角的渐变，蓝色到红色/到左上角的线性渐变，蓝色，红色；/我希望从下到上的渐变从蓝色开始，在高度40处以绿色渐变开始，最后以红色/线性渐变0deg、蓝色、绿色40、红色结束。我如何将它与我的徽标结合起来图像？首先，我们创建一个对象，因为它是一个徽标。所以我们使用a标签，它是一个超链接，然后声明伪类mylogo。
lt；ahref=34；班级=34；title=34;gt;lt;/agt;然后定义标志样式。
这为Mylogo提供了线性渐变。原理并不复杂。使用线性渐变绘制白色半透明渐变图层，并使用背景的负坐标隐藏它。同时，我们使用过渡属性将鼠标悬停时的时间设置为1秒。延时动画逐渐移动光点的坐标，创造出光泽的过渡效果。
mylogomylogo:hover这里需要注意的一件事是基础负坐标必须超过徽标主体的宽度。否则位移将不够。效果为
看起来不错。这里，过渡属性是在徽标主体的伪类上设置的。此时，当标志体失去鼠标焦点时，点位置会回到原来的负坐标，灯光会闪回，阴影也会再次闪回。这意味着在一次悬停期间，将会有两次位移和两次闪光。如果您只想闪烁一次，则将过渡加载到悬停伪类中将防止随后发生第二次位移。离开后没有动画闪回，因为动画效果仅在鼠标悬停时出现。
mylogomylogo:hover的效果是
但这就是结局吗？我还不这么认为。是不是有点一样？
如果大家都用线性渐变，难免会有点无聊，那么有没有不同的玩法呢？
既然知道原理了，那只是位移的一个小技巧而已。我们将完全放弃线性渐变，并使用具有光泽纹理的背景图像。
由于使用了背景图像，因此您需要修改代码并向项目的背景图像添加容器和范围标签。
lt；ahref=34；班级=34；title=34;gt;lt;spangt;lt;/spangt;lt;/agt;样式类似于线性渐变，使用负坐标隐藏背景图像。发生在span标签上。
mylogospan下一步比线性渐变简单得多。要移动背景图像，请直接设置悬停属性。
mylogo:hover范围的效果是
如果你仔细观察，你会发现背景图片更适合传递光影的效果。由于每个线性渐变梯度点在不同分辨率的屏幕上并不均匀，因此在高海拔处会出现不完美的光点。解决。
深色模式效果如下
看起来更有质感一些。您还可以使用过渡来玩一些更有趣的效果。
mylogo:hover让我们旋转、跳跃并闭上眼睛。
结论两种方案都能很好地实现光影效果。不同之处在于，线性渐变不会消耗网站的带宽，而是消耗计算机的CPU和内存。然而，与背景渐变相比，背景图像效果需要占用更多的网络带宽，而WebP技术可以帮助实现图像的最终压缩。参考
想知道的css永远在闪动和css闪动效果相关内容已解完毕，希望对各位有所帮助。
No Comment