DIV CSS 佈局教程網

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

這個 CSS3 的效果怎麼實現呢？

HTML 設計成這樣：

 
<p class="overimg">
	<a><img src="http://www.lvyestudy.com/images/css3.jpg"></a>
	<i class="light"></i>
</p>

CSS 為：

 
.overimg{
	position: relative;
	display: block;
	/* overflow: hidden; */
	box-shadow: 0 0 10px #FFF;
}
.light{
	cursor:pointer;
	position: absolute;
	left: -180px;
	top: 0;
	width: 180px;
	height: 90px;
	background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
	background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
	transform: skewx(-25deg);
	-o-transform: skewx(-25deg);
	-moz-transform: skewx(-25deg);
	-webkit-transform: skewx(-25deg);
 
}
.overimg:hover .light{
	left:180px;
	-moz-transition:0.5s;
	-o-transition:0.5s;
	-webkit-transition:0.5s;
	transition:0.5s;
}

對於上面的代碼，我們可以使用“HTML在線編輯器”進行測試一下。

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

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

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

本文來源：現代簡明魔法（http://www.nowamagic.net/librarys/veda/detail/2600）