您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 设计欣赏 >> 浏览设计教程

百度春节舞龙logo,鼠标跟随特效详解,附html+js压缩包

 

在2012年的新年除夕夜来临之际, 百度上线了2012年的春节Logo,这次的Logo不同以往,既不是静态的Logo,也不是以前的GIF动态图片。今年的春节Logo,百度用蓝色的龙作为了主视觉,感觉十分的霸气,当用户在百度首页用鼠标悬停在百度2012年的春节Logo上时,蓝色的巨龙将会从Logo上飞出,随着鼠标的移动而舞动。

点击预览效果

       据了解,这次的Logo是百度在Logo上的又一次尝试,为了兼容在中国实用较多的一些老旧版本的浏览器,让大家都能看到这炫彩的Logo。这次的Logo没有完全采用HTML5的技术,对于老旧浏览器传统的JS的技术也使得这个Logo可以较为完美的被呈现。

在这里我们对百度今年的Logo做一下技术分解:

一、百度对于静止状态和悬停状态分别有两种Logo,用以展示出龙腾空前和腾空后出Logo后的不同状态。

(腾龙前的静态Logo)

腾龙后的静态Logo

(腾龙后的静态Logo)

二、在腾空飞出后的龙是由多个部分组成,因此,这个看起来是整体的龙实际上也依赖于多个部分,而且每个部分都非常的精巧。

(龙头)

(龙身)

(龙足)

(龙尾)

(龙尾羽)

三、JS代码控制了整个龙的动作,包括它的如下动作:跟随鼠标、鼠标静止时抖动全身、由右侧直接飞回Logo(或自左侧折叠后自右侧飞回、或自上而下呈万字飞回)。在这个控制的JS中,主要是对龙的各个部分进行了定位、用函数特别定义了几种龙的动作。更多细节,大家可以在下面的代码中自己研究一下。

 

 

 下载信息  [文件大小:62.56 KB 下载次数: 次]
点击下载文件:baidu_logo_tuquu

 


[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/de1250.html
23例精致单页网站设计
35个漂亮的进度条设计
图趣网微信
建议反馈
×