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

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

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

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

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

view source print ?

< 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实现代码：

view source print ?

var i=0;

window.setInterval(google,83);

function google(){

if (i<=154){

var logo = document.getElementById( "hplogo" +i);

logo.style.display = 'block' ;

}

i++;

}

　　大功告成，看下demo吧。

#hplogo { margin: 0pt; padding: 0pt; position: relative; }#hplogo div { display: none; pointer-events: none; position: absolute; }

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

　　附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年）。