google纪念玛莎·葛兰姆的logo，一大早就听群里面讨论，也许这个logo创意不错，得到大家的热捧。晚上抽空研究了下google的实现方法，此次的logo利用css的背景图定位+js实现。
自己找了个gif图改成css sprite背景图，做了个演示：查看
google的那个logo动画：查看
css、js部分其实不难，不过话说google攻城师的水平真不错。难点是把原始动画制作成CSS Sprites的部分，要规划好：如何才能用最小的图实现这个动画，如果仅仅单纯把动画里每帧的图铺起来，那意义就不是很大了。下面是注释过的js部分：
(function() {
var K = {
get:function(I){
return document.getElementById(I);
},
create:function(T){
return document.createElement(T);
},
remove:function(E){
return E && E.parentNode && E.parentNode.removeChild(E);
},
on:function(E, N, FN){
E.addEventListener ? E.addEventListener(N, FN, !1) : E.attachEvent("on" + N, FN);
}
},
//把每个div的left、top、width、height信息存在js数组里
coords = [
[1, 6, 70, 74], [10, 4, 70, 76], [10, 4, 69, 76], [9, 4, 69, 76], [8, 4, 70, 76], [8, 5, 69, 75], [8, 6, 68, 74], [7, 6, 69, 74], [6, 7, 69, 73],[6, 6, 69, 74, 1], // 这里多了个值，表示下面开始调用背景图的下一行了
[5, 6, 69, 74], [4, 6, 70, 74], [4, 6, 70, 74], [3, 6, 70, 74], [2, 6, 70, 74], [1, 6, 70, 73], [1, 6, 70, 74], [1, 6, 70, 74], [1, 7, 70, 73], [1, 7, 70, 73, 1], [1, 6, 70, 74], [1, 6, 70, 74], [1, 7, 70, 74], [1, 7, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74, 1], [1, 6, 70, 74], [1, 6, 70, 74], [1, 6, 70, 74]
],
length = coords.length, num, repeatX, repeatY, rowHeight, timer = -1,
logoId = K.get("hplogo"),
nav = function() {
alert("跳转页面");
},
draw = function() {
var arr = coords[num];
if ( logoId && arr[0]) {
var b = K.create("p");
b.id = "hplogo" + num;
b.style.left = arr[0] + "px";
b.style.top = arr[1] + "px";
b.style.width = arr[2] + "px";
b.style.height = arr[3] + "px";
b.style.backgroundPosition = - repeatX + "px " + - repeatY + "px";
b.onmousedown = nav; //for IE、opera 点击涂鸦跳转
arr[3] > rowHeight && ( rowHeight = arr[3]); //记录当前背景片段所在行的高度(sprite图片中)
//如果有arr[4]，就表示开始调用背景图的下一行了，背景图的y坐标就需要 + 上一行的高度；背景x坐标当然要重置为0了， rowHeight当然也重置为0。
//如果没有arr[4]，表示还在调用同一行的背景图，那么只需要增加x坐标的位置就OK了。
arr[4] ? ( repeatX = 0, repeatY += rowHeight, rowHeight = 0) : repeatX += arr[2];
logoId.appendChild(b);
//本动画比google 动画简单，上一帧图像没有用途，所以直接隐藏掉了，google的那个这句就没必要了
num != 0 && (K.get("hplogo"+(num-1)).style.display="none");
++ num;
//num < length && ( timer = setTimeout( draw, 83)); //播放1次
timer = setTimeout( draw, 120); num === length && init(); //循环播放
}
},
init = function() { //加载sprite图片完成，开始涂鸦
rowHeight = repeatY = repeatX = num = 0; //变量值初始化
//下面的代码起到循环播放的作用;只播放一次,可以删掉
timer != -1 && (clearTimeout( timer), timer = -1);
for (var a = 0; a < length; ++a) {//如果已经添加了动画div，就移除
K.remove(K.get("hplogo" + a))
}
draw(); // 开始涂鸦
};
//加载完成后才绘制动画
var bg = K.create("img");
K.on(bg,"load",init);
bg.src = "sprite.png"
})();对比这个葛兰姆logo，我更喜欢“罗伯特·本生诞辰200周年”的logo，利用canvas、css、js。
verne，这个也还可以，支持css3的浏览器使用transform来做动画，不支持css3使用position来定位实现。
围观更多logo：http://www.google.com/logos/index.html
