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

線性漸變linear-gradient
服務器君一共花費了109.263 ms進行了4次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

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

這個 CSS3 的效果怎么實現呢?

HTML 設計成這樣:

<p class="overimg">
	<a><img src="http://www.zqhthc.tw/librarys/images/201402/2014_02_15_01.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;
}

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

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

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

本文地址:http://www.zqhthc.tw/librarys/veda/detail/2600,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.zqhthc.tw/librarys/veda/detail/2600

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏

大家都在看

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《編譯原理(第2版)》 Alfred V. Aho (作者), Monica S.Lam (作者), 趙建華 (譯者), 鄭滔 (譯者), 戴新宇 (譯者)

《編譯原理(第2版)》全面、深入地探討了編譯器設計方面的重要主題,包括詞法分析、語法分析、語法制導定義和語法制導翻譯、運行時刻環境、目標代碼生成、代碼優化技術、并行性檢測以及過程間分析技術,并在相關章節中給出大量的實例。與上一版相比,《編譯原理(第2版)》進行了全面的修訂,涵蓋了編譯器開發方面的最新進展。每章中都提供了大量的系統及參考文獻。《編譯原理(第2版)》是編譯原理課程方面的經典教材,內容豐富,適合作為高等院校計算機及相關專業本科生及研究生的編譯原理課程的教材,也是廣大技術人員的極佳參考讀物。

更多計算機寶庫...

英超直播吻球网