使用CSS3線性漸變實現圖片閃光划過效果

在百度音樂 http://music.baidu.com/ 看到這么一個圖片效果，當鼠標移上去的時候，會有一道閃光在圖片上划過，效果挺酷炫的。於是把這個效果再實現一下：

這個 css3 的效果怎么實現呢？

html 設計成這樣：

<p class="overimg">
	<a><img src="http://img.caibaojian.com/uploads/2014/02/080913ctV.jpg" alt="使用CSS3線性漸變實現圖片閃光划過效果"></a>
	<i class="light"></i>
</p>

CSS 為：

.overimg {
position: relative;
display: block; /* overflow: hidden;
*/

-webkit-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF; /* overflow: hidden;
*/
}

.light {
cursor: pointer;
position: absolute;
left: -180px;
top: 0;
width: 180px;
height: 90px;

background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));

-webkit-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-ms-transform: skewx(-25deg);
transform: skewx(-25deg);
}

.overimg:hover .light {
left: 180px;

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

大體思想是，設計一個透明層i，skewx在X軸上做了負25度的變形，背景顏色用的是CSS3的線性漸變linear-gradient，然后hover的時候，設置0.5s的動畫時間。

同時在 i 層使用 cursor:pointer，如果不設置這個的話，需要等透明層動畫之后才能看得到 pointer 指針。

打開 F12 調試來看會更加清楚。

原文鏈接： 使用CSS3線性漸變實現圖片閃光划過效果 版權所有，轉載時請注明出處，違者必究。
注明出處格式：前端開發博客 ( http://caibaojian.com/css3-linear-gradient-skewx.html)