原文转载自《刘越的科技博客》https://v3u.cn/a_id_197网友喜欢看电影的人肯定会注意到一个有趣的细节，那就是电影制作方肯定会在片头的Logo链接中做一个小特效：光在影子间闪烁，不仅可以提高影片的辨识度Logo，还可以提升质感，一石二鸟。参考华纳兄弟影业的例子：那么，在前端领域，如果采用纯CSS技术，是否可以实现类似的特效呢？答案当然是肯定的。本次我们以本站logo为例，讲解如何使用纯CSS技术实现图片logo鼠标悬停发光的光影效果。一般来说，大多数前端开发人员会选择linear-gradient()，它创建一个表示两种或多种颜色的线性渐变的图像。结果是数据类型，这是一种特殊的数据类型。简单用法：/*渐变轴为45度，从蓝色到红色*/linear-gradient(45deg,blue,red);/*从右下到左上，从蓝到红*/linear-gradient(tolefttop,blue,red);/*从下到上，渐变从蓝色开始，渐变从高度的40%处的绿色开始，到最后以红色结束*/linear-gradient(0deg,blue,green40%,red);那么它如何与徽标图像结合使用呢？先创建一个对象，因为是logo，所以我用tag，也就是超链接，然后声明伪类mylogo：之后，定义标志的样式：.mylogo{display:block;保证金：0自动；宽度：255px；高度：200px；背景图片：/logo.png；背景重复：不重复；}然后就是linear-gradient()出来了，原理不复杂，用linear-gradient画一个白色的半透明渐变图层，用背景的负坐标隐藏，配合transition属性设置鼠标悬停（hover）1秒时，延时动画逐渐移动点坐标，产生光面刷效果：.mylogo{width:255px;高度：200px；背景：-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,0.5)50%,rgba(255,255,255,0)100%)no-repeat-270px0,url(/logo.png)不重复；过渡：1秒轻松；}.mylogo:hover{背景位置:200px0,00;}这里要注意，默认的负坐标一定要超过标识体的宽度，否则位移不够。效果如下：看起来不错，这里在logobody的伪类上设置了transition属性。这时，如果标志体失去了鼠标的焦点，斑点位置就会回到原来的负坐标。这时候光影又会闪回来，也就是发生一个hover两次移位，两次闪烁，如果只想闪一次，可以把transition加载到hover伪类中，这样就会有离开后没有二次移位，因为动画效果只会在鼠标悬停时出现，鼠标离开后不会有动画闪退：.mylogo{width:255px;高度：200px；/*直接使用背景缩放版*//*每个渐变点的位置不要太小，否则会出现不完整的斑点*//*no-repeat-270px0:隐藏斑点定位*/background:-webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,0.5)50%,rgba(255,255,255,0)100%)不重复-270px0,url(/logo.png)不重复;/*transition:1sease;*/}.mylogo:hover{/*鼠标滑动实现点滑，但是在多背景的情况下，多背景需要-position属性值，否则会影响其他背景*/background-position:200px0,00;过渡：1秒轻松；效果是这样的：但是这就结束了吗？似乎还没有。.一点点相同的东西？如果大家都用linear-gradient的话，难免有些乏味，那么有没有其他不与众不同的玩法呢？既然知道了原理，无非就是位移的小技巧，所以我们就彻底脱离了linear-gradient，使用一个有光泽纹理的背景图shine.png:因为使用了背景图，所以我们需要修改代码为实体在背景图片中添加容器，span标签：风格类似于linear-gradient，同样使用负坐标隐藏span标签中的背景图片：.mylogospan{display:block;背景：url("/shine.png")-360px-380px不重复；过渡属性：全部；过渡持续时间：.7s；高度：200px；宽度：255px；}接下来就比linear-gradient简单多了，直接设置hover属性，让背景图片偏移：.mylogo:hoverspan{background-position:100px300px;}效果是这样的：仔细观察会发现背景图更适合光影传递的效果，因为linear-gradient的每个渐变点在不同分辨率的屏幕下是不均匀的，也就是也就是说，在高分辨率下会出现缺陷点。深色模式下的效果是这样的：看起来更有质感一点。另外，也许你想用transition来玩一些更精彩的效果：.mylogo:hover{-webkit-transform:rotate(666turn);变换：旋转（666转）；转换延迟：1s；过渡属性：全部；过渡持续时间：59s；transition-timing-function:cubic-bezier(.34,0,.84,1)}让我们旋转，跳跃，闭眼：结论：两组方案都能很好的实现光影效果。不同的是linear-gradient不消耗网站的带宽，而是消耗电脑的CPU和内存。相较于背景渐变，背景图片的效果会更好，但是会占用更多的网络带宽，而webp技术可以帮助我们将图片压缩到极致（参见：https://v3u.cn/a\_id\_190)，所以我们可以理解这是一个权衡。毕竟书上写的是道理，现实是要取舍的不是吗？原文转载自《刘越的科技博客》https://v3u.cn/a_id_197
