Google 今天的logo效果
玛莎·葛兰(英语：Martha Graham，1894年5月11日-1991年4月1日)，又译为马莎·格雷厄姆，美国舞蹈家和编舞家，也是现代舞蹈史上最早的创始人之一。葛兰姆的作品多以美国人文或是希腊古典神话为主题。
强大的css sprite技术把css属性全给保存到js数组里面了，动态的创建了div模拟动画了效果！
实现原理：
1、需要懂得源动漫原理，这个估计画过动漫的人都会，画出动画，然后把每一帧动作进行css sprite合成，做到一个背景图上面。
2、大家看css sprite图片的时候会发现，每个动作原型都在一行，动作所占用的大小也是一样的，便于css控制，就相当于把flash动画给导出每一帧，然后按动作顺序合成了。
3、js动态创建出来div， 通过改变创建出来div的背景图片的background-position来控制显示出来的图片，然后同时控制div的left top位置(创建的div是绝对定位的)。前端开发工程师们事先把div的位置和背景图片的位置都没计算好了，然后封装到JS里面，执行js后就模拟出来 了css动画效果，至于大家看不到css和div，其实是这些东西全写到js里面了，都是js生成的！原理其实也很简单，相信学过flash的童靴会更容 易的明白，在舞台上面不停的切图帧就可以了，图片切换的快了就成动画了！
这里有页面的代码，可供大家参考！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Google Logo Martha Graham CSS & Javascript" />
<meta name="keywords" content="Google,Logo,Martha" />
<title>Google Logo Martha Graham – Sunflowa Media Web Site</title>
<script>window.google={kEI:"e_vJTb3iO4vGcOX89YoN",kEXPI:"17259,17311,28504,28555,29685,29795,29822,29901,30035,30094,30107,30151",kCSI:{e:"17259,17311,28504,28555,29685,29795,29822,29901,30035,30094,30107,30151",ei:"e_vJTb3iO4vGcOX89YoN",expi:"17259,17311,28504,28555,29685,29795,29822,29901,30035,30094,30107,30151"},authuser:0,ml:function(){},kHL:"zh-CN",time:function(){return(new
Date).getTime()},
log:function(c,d,b){var a=new
Image,e=google,g=e.lc,f=e.li;a.onerror=(a.onload=(a.onabort=function(){delete
g[f]}));g[f]=a;b=b||"/gen_204?atyp=i&ct="+c+"&cad="+d+"&zx="+google.time();a.src=b;e.li=f+1},lc:[],li:0,
Toolbelt:{}};
window.google.sn="webhp";var
i=window.google.timers={};window.google.startTick=function(a,b){i[a]={t:{start:(new
Date).getTime()},bfr:!(!b)}};window.google.tick=function(a,b,c){if(!i[a])google.startTick(a);i[a].t[b]=c||(new
Date).getTime()};google.startTick("load",true);try{window.google.pt=window.gtbExternal&&window.gtbExternal.pageT();
}catch(v){}
var
_gjwl=location;function _gjuc(){var
b=_gjwl.href.indexOf("#");if(b>=0){var
a=_gjwl.href.substring(b+1);if(/(^|&)q=/.test(a)&&a.indexOf("#")==-1&&!/(^|&)cad=h($|&)/.test(a)){_gjwl.replace("/search?"+a.replace(/(^|&)fp=[^&]*/g,"")+"&cad=h");return
1}}return 0}function
_gjp(){!(window._gjwl.hash&&window._gjuc())&&setTimeout(_gjp,500)};
window._gjp && _gjp()</script>
<style>
#hplogo {background:white; margin:10px auto;cursor:pointer;height:156px;position:relative;width:403px; margin-top: 150px;}
#hplogo div{pointer-events:none;position:absolute}
</style>
</head>
<body>
<h1>Google Logo Martha Graham CSS & Javascript</h1>
<div
id=hplogo><a href="#"><img
src="http://www.google.com.hk/logos/2011/graham11-hp-start.png" border=0
alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" title="现代舞先驱玛莎·葛兰姆 117 周年诞辰"
/></a></div><script>(function(){try{if(!google.doodle)google.doodle={};var
d=[[307,48,88,89],[307,48,89,89],[307,48,91,89],[305,49,93,89],[305,50,93,88],[305,50,93,88],[306,52,92,86],[305,53,93,84],[305,54,94,83],[306,54,93,83],[307,54,92,83],[307,54,92,83],[308,54,90,83],[308,54,90,83],[306,53,91,84],[306,53,91,84],[308,53,90,84],[308,53,90,84],[305,53,92,84],[305,52,92,85],[306,52,91,85],[308,51,88,87,1],[308,50,88,88],[308,49,88,88],[307,49,89,88],[307,50,89,87],[308,51,89,86],[307,54,90,83],[307,57,90,80],[306,58,92,79],[306,58,92,79],[305,60,92,77],[302,61,95,76],[302,63,95,74],[302,51,96,86],[302,66,98,71],[304,67,96,69],[301,63,96,74],[301,58,93,79],[291,52,94,85],[288,50,71,88],[285,43,76,95],[285,37,70,101],[281,29,55,109],[278,20,58,119],[278,20,55,119,1],[277,12,121,127],[271,2,122,138],[267,1,126,139],[264,0,136,140],[260,0,141,140],[255,0,148,140],[252,0,151,140],[249,2,121,138],[247,3,123,137],[246,3,123,137],[246,2,124,137],[258,2,112,137],[263,2,106,137],[263,2,106,137],[262,2,103,137],[260,2,104,136],[260,2,104,137,1],[268,2,98,137],[267,2,99,137],[266,2,97,137],[266,3,96,136],[264,3,99,136],[263,3,100,136],[261,3,100,136],[259,2,138,137],[254,2,126,137],[247,2,101,136],[240,2,108,136],[238,1,110,137],[230,1,118,138],[220,15,128,124],[211,18,137,121],[205,43,102,96],[202,45,104,93],[200,38,97,101],[198,38,104,101,1],[197,39,107,100],[197,39,112,100],[213,39,94,110],[212,40,95,111],[211,41,97,111],[209,42,99,112],[209,43,98,112],[213,43,87,112],[213,42,83,113],[211,40,86,109],[211,38,86,103],[211,37,88,112],[211,20,186,131],[213,27,167,122],[212,44,87,105],[210,44,88,98],[195,44,106,98],[189,44,110,98],[182,46,117,99],[173,44,118,96,1],[161,43,130,99],[154,42,137,97],[153,42,137,97],[153,42,137,97],[152,41,137,98],[151,41,137,97],[149,41,145,97],[148,25,144,114],[148,13,144,126],[141,12,153,127],[115,11,173,128],[108,7,180,133],[108,4,180,136],[108,3,176,137,1],[108,1,161,139],[105,1,235,138],[103,1,295,148],[103,0,277,149],[108,0,234,137],[101,0,232,137],[99,0,135,139],[95,0,244,139],[81,0,152,139],[69,0,164,139,1],[66,0,169,139],[65,0,170,139],[63,0,168,138],[61,0,159,138],[35,0,304,139],[19,0,189,140],[18,11,138,129],[18,11,137,129],[18,11,137,128],[18,6,135,133],[7,4,146,136],[6,4,147,136],[3,4,150,136,1],[3,5,150,135],[3,8,150,132],[4,6,394,145],[12,6,388,145],[11,8,389,144],[11,8,387,144],[11,8,387,143,1],[10,8,113,131],[11,8,111,131],[10,9,112,130],[12,9,116,130],[12,9,111,130],[12,9,111,130],[12,9,110,131],[12,34,113,106],[13,35,110,104]],e=d.length,f,g,h,i,j=-1,k=function(){google.nav&&google.nav.go?google.nav.go("#"):window.location.href="#"},l=function(){var
a=d[f],c=document.getElementById("hplogo");if(c&&a[0]){var
b=document.createElement("div");b.id="hplogo"+f;b.style.left=a[0]+"px";b.style.top=a[1]+"px";b.style.width=a[2]+"px";b.style.height=a[3]+"px";b.style.background="url(graham11-hp-sprite.png)
no-repeat "+-g+"px
"+-h+"px";b.onmousedown=k;a[3]>i&&(i=a[3]);a[4]?(g=0,h+=i,i=0):g+=a[2];c.appendChild(b);++f;f<
e&&(j=window.setTimeout(l,83))}},m=function(){google.doodle.a=!1;i=h=g=f=0;j!=-1&&(window.clearTimeout(j),j=-1);for(var
a=0;a< e;++a){var
c=document.getElementById("hplogo"+a);c&&c.parentNode&&c.parentNode.removeChild(c)}j=window.setTimeout(l,83)};if(!google.doodle.a){google.doodle.a=!0;var
n=document.createElement("img");n.addEventListener?n.addEventListener("load",m,!1):n.attachEvent("onload",m);n.src="graham11-hp-sprite.png"}}catch(o){google.ml(o,!1,{cause:"DOODLE"})};})();</script></div>
</body>
</html>
