举重若轻流水行云,前端纯 CSS3 实现质感非凡的图片 Logo 鼠标悬停 (hover) 光泽一闪而过的光影特效
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_197
喜欢看电影的朋友肯定会注意到一个有趣的细节,就是电影出品方一定会在片头的 Logo 环节做一个小特效:暗影流动之间光泽一闪而过,这样做不仅可以提高 Logo 的辨识度,还可以提升质感,一举两得。参照华纳兄弟影业(Warner Bros. Pictures)的例子:
那么,在前端领域,如果使用纯 CSS 技术,能不能实现类似的特效呢?答案当然是可以的,这次我们以本站的 Logo 为例子,以一持万、提纲挈领地讲解一下如何使用纯 CSS 技术实现图片 Logo 鼠标悬停光泽一闪而过的光影特效。
一般情况下,大多数前端开发会选择 linear-gradient() ,这个方法创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型,是一种特别的<image>数据类型。
简单用法:
那么它怎么和 logo 图片结合使用呢?首先创建一个对象,因为是 logo,所以我使用 a 标签,也就是超级链接,随后声明伪类 mylogo:
之后,定义 logo 的样式:
接着就是 linear-gradient()出场,原理并不复杂,利用 linear-gradient 绘制一个白色半透明渐变层,利用背景的负坐标隐藏起来,同时配合 transition 属性,在鼠标悬停(hover)的时候,设置 1 秒钟的延时动画,逐渐将光斑的坐标进行位移,产生一种光泽掠过的效果:
这里需要注意的是,默认负坐标一定要超过 logo 本体的宽度,否则位移就不够充分,效果是下面这样的:
看起来还不错,这里 transition 的属性设置在 logo 本体的伪类上面,此时如果 logo 本体失去鼠标的焦点,光斑位置又会回到原来的负坐标,此时光影又会在回闪一次,也就是一次悬停发生两次位移,闪烁两次,如果只想闪一次,可以将 transition 加载 hover 伪类中,这样离开后不会二次位移,因为动画效果只会出现在鼠标悬停上,鼠标离开后,就没有动画回闪了:
效果是这样的:
但是这就结束了吗?还没有,因为这看起来似乎。。。有点一律千篇?
如果所有人都用 linear-gradient,就难免有点无趣了,那么有没有别的不落窠臼的玩儿法呢?
既然晓得了原理,无非就是位移产生的小把戏,那么我们完全脱离 linear-gradient,使用一张带光泽质感的背景图片 shine.png:
由于使用了背景图,所以我们需要对代码进行修改,为实体的背景图添加一个容器,span 标签:
样式和 linear-gradient 差不多,也是利用负坐标将 span 标签内的背景图隐藏起来:
接下来要比 linear-gradient 要简单地多,直接设置悬停属性,让背景图片发生位移:
效果是这样的:
如果仔细观察,会发现背景图更加契合光影掠过的效果,因为 linear-gradient 每个渐变点在不同分辨率的屏幕下并不统一,也就是说在高分辨下会出现残缺光斑。
暗黑模式下的效果是这样的:
看起来似乎更加有质感一点,除此之外,也许你还想利用 transition 玩一些更加刺激的效果:
让我们旋转、跳跃、闭着眼:
结语:两套方案都可以很好的实现光影特效,区别在于 linear-gradient 并不会消耗网站的带宽,但会消耗电脑的 CPU 和内存,而与背景渐变相比,背景图像效果会更好一点,但是将会更多地使用网络带宽,而webp技术又可以帮助我们对图片进行极致的压缩(参见:https://v3u.cn/a_id_190),所以我们可以理解这是一种权衡,毕竟,书本上写的是道理,但是现实中讲究的是取舍,不是吗?
原文转载自「刘悦的技术博客」 https://v3u.cn/a_id_197
版权声明: 本文为 InfoQ 作者【刘悦的技术博客】的原创文章。
原文链接:【http://xie.infoq.cn/article/e3246e354e2f02951a565b45b】。文章转载请联系作者。
评论