其他频道 PS工具大全 在线PS 在线ico制作 字体转换器 书法字典
当前位置:首页 > 教程 > 高级实例 >

2012年百度春节舞龙logo,鼠标跟随特效详解

作者:gsf666 来源:站酷 更新时间:2012-12-12 返回首页:PS酒吧
在2012年的新年除夕夜来临之际, 百度上线了2012年的春节Logo,这次的Logo不同以往,既不是静态的Logo,也不是以前的GIF动态图片。今年的春节Logo,百度用蓝色的龙作为了主视觉,感觉十分的霸气,当用户在百度首页用鼠标悬停在百度2012年的春节Logo上时,蓝色的巨龙将会从Logo上飞出,随着鼠标的移动而舞动。
据了解,这次的Logo是百度在Logo上的又一次尝试,为了兼容在中国实用较多的一些老旧版本的浏览器,让大家都能看到这炫彩的Logo。这次的Logo没有完全采用HTML5的技术,对于老旧浏览器传统的JS的技术也使得这个Logo可以较为完美的被呈现。
在这里我们对百度今年的Logo做一下技术分解:
一、百度对于静止状态和悬停状态分别有两种Logo,用以展示出龙腾空前和腾空后出Logo后的不同状态。
(腾龙前的静态Logo)

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

(龙头)

(龙身)
(龙足)

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

顶:0 踩:0 作业:Go! 问答:?

“2012年百度春节舞龙logo,鼠标跟随特效详解”的相关教程和素材: 特效 LOGO

本周热点教程
Photoshop教程栏目列表