原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197
喜爱看电影的敌人必定会留神到一个乏味的细节，就是电影出品方肯定会在片头的Logo环节做一个小特效：阴影流动之间光泽一闪而过，这样做不仅能够进步Logo的辨识度，还能够晋升质感，两全其美。参照华纳兄弟影业(Warner Bros. Pictures)的例子：
那么，在前端畛域，如果应用纯CSS技术，能不能实现相似的特效呢？答案当然是能够的，这次咱们以本站的Logo为例子，以一持万、提纲挈领地解说一下如何应用纯CSS技术实现图片Logo鼠标悬停光泽一闪而过的光影特效。
个别状况下，大多数前端开发会抉择 linear-gradient() ，这个办法创立一个示意两种或多种色彩线性突变的图片。其后果属于<gradient>数据类型，是一种特地的<image>数据类型。
简略用法：
/* 突变轴为45度，从蓝色突变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色突变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始突变、到高度40%地位是绿色突变开始、最初以红色完结 */
linear-gradient(0deg, blue, green 40%, red);那么它怎么和logo图片联合应用呢？首先创立一个对象，因为是logo，所以我应用a标签，也就是超级链接，随后申明伪类mylogo：
<a href="/" class="mylogo" title="刘悦的技术博客"></a>之后，定义logo的款式：
.mylogo{
display:block;
margin: 0 auto;
width:255px;
height:200px;
background-image:/logo.png;
background-repeat: no-repeat;
}接着就是linear-gradient()出场，原理并不简单，利用linear-gradient绘制一个红色半透明突变层，利用背景的负坐标暗藏起来，同时配合transition属性，在鼠标悬停(hover)的时候，设置1秒钟的延时动画，逐步将光斑的坐标进行位移，产生一种光泽掠过的成果：
.mylogo{
width: 255px;
height: 200px;
background: -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 -270px 0, url(/logo.png) no-repeat;
transition: 1s ease;
}
.mylogo:hover {
background-position: 200px 0, 0 0;
}这里须要留神的是，默认负坐标肯定要超过logo本体的宽度，否则位移就不够充沛，成果是上面这样的:
看起来还不错，这里transition的属性设置在logo本体的伪类下面，此时如果logo本体失去鼠标的焦点，光斑地位又会回到原来的负坐标，此时光影又会在回闪一次，也就是一次悬停产生两次位移，闪动两次，如果只想闪一次，能够将transition加载hover伪类中，这样来到后不会二次位移，因为动画成果只会呈现在鼠标悬停上，鼠标来到后，就没有动画回闪了：
.mylogo{
width: 255px;
height: 200px;
/*间接应用background缩放版本*/
/*每个突变点的地位不能太小，不然会呈现完好光斑*/
/*no-repeat -270px 0：将光斑定位暗藏起来*/
background: -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 -270px 0, url(/logo.png) no-repeat;
/* transition: 1s ease; */
}
.mylogo:hover{
/*鼠标滑过实现光斑滑动，然而在多背景状况下，须要多个background-position属性值，否则会影响其余背景*/
background-position: 200px 0, 0 0;
transition: 1s ease;
}成果是这样的：
然而这就完结了吗？还没有，因为这看起来仿佛。。。有点一律千篇？
如果所有人都用linear-gradient，就不免有点无趣了，那么有没有别的不落窠臼的玩儿法呢？
既然知道了原理，无非就是位移产生的小把戏，那么咱们齐全脱离linear-gradient，应用一张带光泽质感的背景图片shine.png：
因为应用了背景图，所以咱们须要对代码进行批改，为实体的背景图增加一个容器，span标签：
<a href="/" class="mylogo" title="刘悦的技术博客"><span></span></a>款式和linear-gradient差不多，也是利用负坐标将span标签内的背景图暗藏起来：
.mylogo span {
display: block;
background: url("/shine.png") -360px -380px no-repeat;
transition-property: all;
transition-duration: .7s;
height: 200px;
width: 255px;
}接下来要比linear-gradient要简略地多，间接设置悬停属性，让背景图片产生位移：
.mylogo:hover span {
background-position: 100px 300px;
}成果是这样的：
如果仔细观察，会发现背景图更加符合光影掠过的成果，因为linear-gradient每个突变点在不同分辨率的屏幕下并不对立，也就是说在高分辨下会呈现完好光斑。
暗黑模式下的成果是这样的：
看起来仿佛更加有质感一点，除此之外，兴许你还想利用transition玩一些更加刺激的成果：
.mylogo:hover {
-webkit-transform: rotate(666turn);
transform: rotate(666turn);
transition-delay: 1s;
transition-property: all;
transition-duration: 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
发表回复