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

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

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

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

HTML 設計成這樣:

<p class="overimg">
	<a><img src="http://www.824886.live/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.824886.live/librarys/veda/detail/2600,歡迎訪問原出處。

不打個分嗎?

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

http://www.824886.live/librarys/veda/detail/2600

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

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

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

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

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

《敏捷軟件開發(原則模式與實踐)》 馬丁 (作者), 鄧輝 (譯者)

《敏捷軟件開發:原則模式與實踐》由享譽全球的軟件開發專家和軟件工程大師Robert C.Martin將向您展示如何解決軟件開發人員、項目經理及軟件項目領導們所面臨的最棘手的問題。這本綜合性、實用性的敏捷開發和極限編程方面的指南,是由敏捷開發的創始人之一所撰寫的。1.講述在預算和實踐要求下,軟件開發人員和項目經理如何使用敏捷開發完成項目;2.使用真實案例講解如何用極限編程來設計、測試、重構和結對編程;3.包含了極具價值的可多次使用的C++和JAVA源代碼;4.重點講述了如何使用UML和設計模式解決面向客戶系統的問題。

更多計算機寶庫...

云南快乐十分走势一定牛 海南4+1官网 nba录像吧 湖南幸运赛车奖金查询 站长网赚 新股票上市规则 搜索 吉祥棋牌 辽宁11选5走势图玩法 分分彩是不是骗局 河北省11选五遗漏 车联网怎么收费