京东首页从1F开始，左侧大图都有一个很有意思的效果，当你的鼠标滑过图片时，会有一层质感很强的流光从左侧不可见位置滑动到右侧不可见位置的效果。相较于淘宝的蒙版效果，个人感觉流光效果更好看一些。因此，本站一些图片也采用了这种流光效果，具体可鼠标滑过博文封面图预览。

流光效果实现起来很简单，主要是利用css3的线性渐变（linear-gradient），2D转换（transform）以及倾斜（skew）配合hover来实现，当然如果想要兼容一些低版本浏览器，可以使用图片代替。因此，结构相对简单，只需要一个图片父容器（.image-light），图片容器（img），以及流光容器（:before或:after或其他子标签）。

-- EOF --

本文标题：CSS3实现京东图片鼠标滑过流光效果

本文链接：https://smohan.net/blog/eame1m

本站使用「 署名-非商业性使用 4.0 国际 (CC BY-NC 4.0) 」创作共享协议，转载或使用请署名并注明出处。 相关说明 »