模拟谷歌今日使用的css动画

简介:

2011051113021122.jpg

  不知道大家有没有注意到谷歌今天官网上的logo,刚开始一看还以为是gif,在仔细一看,发现并非如此,原来是使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,从而实现了动画效果。

  本人一时手痒,就想把这个扒下来,但发现谷歌的js写的太牛逼了,无奈,只能自己用自己的思维去模拟一个了。首先,需要两张图,分别是:

2011051113023942.png

2011051113163873.jpg

  当有这两张图后,我们就可以开始模拟了。

  我先通过firebug观察,发现google首页在运行的时候会循环加载以下html代码:

<div id="hplogo0" style="left:307px;top:48px;width:88px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px 0px transparent;"></div>
<div id="hplogo1" style="left:307px;top:48px;width:89px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -88px 0px transparent;"></div>
<div id="hplogo2" style="left:307px;top:48px;width:91px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -177px 0px transparent;"></div>
<div id="hplogo3" style="left:305px;top:49px;width:93px;height:89px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -268px 0px transparent;"></div>
<div id="hplogo4" style="left:305px;top:50px;width:93px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -361px 0px transparent;"></div>
<div id="hplogo5" style="left:305px;top:50px;width:93px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -454px 0px transparent;"></div>
<div id="hplogo6" style="left:306px;top:52px;width:92px;height:86px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -547px 0px transparent;"></div>
<div id="hplogo7" style="left:305px;top:53px;width:93px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -639px 0px transparent;"></div>
<div id="hplogo8" style="left:305px;top:54px;width:94px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -732px 0px transparent;"></div>
<div id="hplogo9" style="left:306px;top:54px;width:93px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -826px 0px transparent;"></div>
<div id="hplogo10" style="left:307px;top:54px;width:92px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -919px 0px transparent;"></div>
<div id="hplogo11" style="left:307px;top:54px;width:92px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1011px 0px transparent;"></div>
<div id="hplogo12" style="left:308px;top:54px;width:90px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1103px 0px transparent;"></div>
...
...

  实际上这就是实现动画效果的因素,但我发现,我可以循环生成,但是我无法循环生成每个div里的样式,因为样式的宽高、偏移像素都是无规律的,所以我的做法就是,把谷歌生成好的代码复制过来,然后默认全部隐藏,然后循环让其显示出来。

  原理就是这样,js的实现也更为简单,所以我就没用jquery,以下是js实现代码:

var i=0;
window.setInterval(google,83);
function google(){
	if(i<=154){
		var logo = document.getElementById("hplogo"+i);
		logo.style.display = 'block';
	}
	i++;
}

  大功告成,看下demo吧。

现代舞先驱玛莎·葛兰姆 117 周年诞辰

  顺便把源码也附上吧,没太多技术含量,如果有问题,希望赐教。源码下载

  附1:后来我发现google原来是把坐标等信息存在js数组里,然后循环添加div元素的时候,把值一并写进去,相关阅读《喜欢今天的Google LOGO 玛莎·葛兰姆

  附2:补充知识

  Google今日涂鸦是为了纪念现代舞先驱玛莎·葛兰姆(Martha Graham,1894年5月11日-1991年4月1日)117周年诞辰,他是美国舞蹈家和编舞家,也是现代舞蹈史的创始人之一。其作品多以美国人文或是希腊古典神话为主题,代表作有《原始的神秘》(Primitive Mysteries,1936年)、《给世界的信》(Letter to the World,1940年)、《阿帕拉契山脈之春》 (Appalachian Spring,1944年)、《夜旅》(Night Journey,1947年)。


   本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2011/05/11/2043122.html,如需转载请自行联系原作者



相关文章
|
15天前
|
前端开发
css 实现一笔画动画(如签名、手写、手绘等)
css 实现一笔画动画(如签名、手写、手绘等)
17 8
|
14天前
|
前端开发
css动画(仿微信聊天页面)
css动画(仿微信聊天页面)
|
15天前
|
前端开发 JavaScript
纯css动画 —— 展开、收起
纯css动画 —— 展开、收起
15 2
|
15天前
|
前端开发
css特效动画——页面加载中 ...
css特效动画——页面加载中 ...
9 1
|
16天前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
14 2
|
16天前
|
前端开发 开发者
通过实践来提升CSS动画技能是非常重要的
【7月更文挑战第1天】通过实践来提升CSS动画技能是非常重要的
13 1
|
16天前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
14 1
|
11天前
|
前端开发 JavaScript
CSS【实战】抽屉动画
CSS【实战】抽屉动画
12 0
|
15天前
|
前端开发
css特效动画——转圈的加载动画
css特效动画——转圈的加载动画
10 0
|
15天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
18 0