CSS3實現京東圖片鼠標滑過流光效果

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

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