您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計欣賞 >> 瀏覽設計教程

百度春節(jié)舞龍logo,鼠標跟隨特效詳解,附html+js壓縮包

 

在2012年的新年除夕夜來臨之際, 百度上線了2012年的春節(jié)Logo,這次的Logo不同以往,既不是靜態(tài)的Logo,也不是以前的GIF動態(tài)圖片。今年的春節(jié)Logo,百度用藍色的龍作為了主視覺,感覺十分的霸氣,當用戶在百度首頁用鼠標懸停在百度2012年的春節(jié)Logo上時,藍色的巨龍將會從Logo上飛出,隨著鼠標的移動而舞動。

點擊預覽效果

       據(jù)了解,這次的Logo是百度在Logo上的又一次嘗試,為了兼容在中國實用較多的一些老舊版本的瀏覽器,讓大家都能看到這炫彩的Logo。這次的Logo沒有完全采用HTML5的技術(shù),對于老舊瀏覽器傳統(tǒng)的JS的技術(shù)也使得這個Logo可以較為完美的被呈現(xiàn)。

在這里我們對百度今年的Logo做一下技術(shù)分解:

一、百度對于靜止狀態(tài)和懸停狀態(tài)分別有兩種Logo,用以展示出龍騰空前和騰空后出Logo后的不同狀態(tài)。

(騰龍前的靜態(tài)Logo)

騰龍后的靜態(tài)Logo

(騰龍后的靜態(tài)Logo)

二、在騰空飛出后的龍是由多個部分組成,因此,這個看起來是整體的龍實際上也依賴于多個部分,而且每個部分都非常的精巧。

(龍頭)

(龍身)

(龍足)

(龍尾)

(龍尾羽)

三、JS代碼控制了整個龍的動作,包括它的如下動作:跟隨鼠標、鼠標靜止時抖動全身、由右側(cè)直接飛回Logo(或自左側(cè)折疊后自右側(cè)飛回、或自上而下呈萬字飛回)。在這個控制的JS中,主要是對龍的各個部分進行了定位、用函數(shù)特別定義了幾種龍的動作。更多細節(jié),大家可以在下面的代碼中自己研究一下。

 

 

 下載信息  [文件大?。?2.56 KB 下載次數(shù): 次]
點擊下載文件:baidu_logo_tuquu

 


[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/de1250.html
23例精致單頁網(wǎng)站設計
35個漂亮的進度條設計
圖趣網(wǎng)微信
建議反饋
×