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

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

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

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

HTML 設計成這樣:

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

不打個分嗎?

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

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

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

大家都在看

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

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

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

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

《C程序設計語言(第2版新版)》 克尼漢 (作者), 等 (作者, 譯者), 徐寶文 (譯者)

《C程序設計語言》(第2版新版)是由C語言的設計者Brian W.Kernighan和Dennis M.Ritchie編寫的一部介紹標準C語言及其程序設計方法的權威性經典著作。全面、系統地講述了C語言的各個特性及程序設計的基本方法,包括基本概念,類型和表達式、控制流、函數與程序結構、指針與數組、結構、輸入與輸出、UNIX系統接口、標準庫等內容。

更多計算機寶庫...

燃烧吧足球登陆