1.這個效果是看到京東商城上的一個下效果，原本的思路是
用js控制一個圖片在某張需要閃光的圖片上重復出現，但是
網上找了一些資料，竟然是用css寫的，真是太帥了！！！
2.原理：在需要閃光的圖片前添加before 屬性；內容為空；
寬為200px,高為100%，left：-150px,overflow:hiddden;
background屬性設置為漸變；顏色看自己需要；transform-skewX(-25deg)
然后為before的content設置過渡動畫：{left：150%,transiton：150px 1s ease 0s}
就可以了；
3：參考代碼如下：
img{width:800px;height:450px;margin:0 auto;}
.img { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.img:before{ content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg)
}
.img:hover:before { left: 150%; transition: left 1s ease 0s; }
<div>
<a href="#" class="img">
<img src="img/1.jpg" alt="風景"/>
</a>
</div>