百度春节舞龙logo,鼠标跟随特效详解,附html+js压缩包
2012/12/11 14:17:00来源:互联网
在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中,主要是对龙的各个部分进行了定位、用函数特别定义了几种龙的动作。更多细节,大家可以在下面的代码中自己研究一下。
下载信息 [文件大小:62.56 KB 下载次数: 次] |
点击下载文件:baidu_logo_tuquu |
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/de1250.html
本文地址:http://www.tuquu.com/tutorial/de1250.html
上一篇:23例精致单页网站设计
下一篇:35个漂亮的进度条设计
这些是最新的
最热门的教程