京東首頁從1F開始，左側(cè)大圖都有一個很有意思的效果，當你的鼠標滑過圖片時，會有一層質(zhì)感很強的流光從左側(cè)不可見位置滑動到右側(cè)不可見位置的效果。相較于淘寶的蒙版效果，個人感覺流光效果更好看一些。因此，本站一些圖片也采用了這種流光效果，具體可鼠標滑過博文封面圖預覽。

流光效果實現(xiàn)起來很簡單，主要是利用css3的線性漸變（linear-gradient），2D轉(zhuǎn)換（transform）以及傾斜（skew）配合hover來實現(xiàn)，當然如果想要兼容一些低版本瀏覽器，可以使用圖片代替。因此，結(jié)構(gòu)相對簡單，只需要一個圖片父容器（.image-light），圖片容器（img），以及流光容器（:before或:after或其他子標簽）。

總結(jié)

以上是生活随笔為你收集整理的CSS3实现京东图片鼠标滑过流光效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。