Google 首页用 Javascript 和 Css 实现舞蹈家跳舞的动画
2011-09-04 18:34 音乐让我说 阅读(551) 评论(0) 编辑 收藏 举报代码如下：
<!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" />
<title>Google 首页用 Javascript 和 Css 实现舞蹈家跳舞的动画</title>
<style>
#hplogo{margin:0;padding:0;position:relative}
#hplogo div{display:none;pointer-events:none;position:absolute}
</style>
<script>
var i=0;
window.setInterval(google,83);
function google(){
if(i<=154){
var logo = document.getElementById("hplogo"+i);
logo.style.display = 'block';
}
i++;
}
</script>
</head>
<body>
<div id="hplogo">
<img border="0" title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" src="http://www.google.com.hk/logos/2011/graham11-hp-start.png">
<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 id="hplogo13" 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 -1193px 0px transparent;"></div>
<div id="hplogo14" style="left:306px;top:53px;width:91px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1283px 0px transparent;"></div>
<div id="hplogo15" style="left:306px;top:53px;width:91px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1374px 0px transparent;"></div>
<div id="hplogo16" style="left:308px;top:53px;width:90px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1465px 0px transparent;"></div>
<div id="hplogo17" style="left:308px;top:53px;width:90px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1555px 0px transparent;"></div>
<div id="hplogo18" style="left:305px;top:53px;width:92px;height:84px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1645px 0px transparent;"></div>
<div id="hplogo19" style="left:305px;top:52px;width:92px;height:85px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1737px 0px transparent;"></div>
<div id="hplogo20" style="left:306px;top:52px;width:91px;height:85px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1829px 0px transparent;"></div>
<div id="hplogo21" style="left:308px;top:51px;width:88px;height:87px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1920px 0px transparent;"></div>
<div id="hplogo22" style="left:308px;top:50px;width:88px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -89px transparent;"></div>
<div id="hplogo23" style="left:308px;top:49px;width:88px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -88px -89px transparent;"></div>
<div id="hplogo24" style="left:307px;top:49px;width:89px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -176px -89px transparent;"></div>
<div id="hplogo25" style="left:307px;top:50px;width:89px;height:87px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -265px -89px transparent;"></div>
<div id="hplogo26" style="left:308px;top:51px;width:89px;height:86px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -354px -89px transparent;"></div>
<div id="hplogo27" style="left:307px;top:54px;width:90px;height:83px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -443px -89px transparent;"></div>
<div id="hplogo28" style="left:307px;top:57px;width:90px;height:80px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -533px -89px transparent;"></div>
<div id="hplogo29" style="left:306px;top:58px;width:92px;height:79px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -623px -89px transparent;"></div>
<div id="hplogo30" style="left:306px;top:58px;width:92px;height:79px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -715px -89px transparent;"></div>
<div id="hplogo31" style="left:305px;top:60px;width:92px;height:77px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -807px -89px transparent;"></div>
<div id="hplogo32" style="left:302px;top:61px;width:95px;height:76px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -899px -89px transparent;"></div>
<div id="hplogo33" style="left:302px;top:63px;width:95px;height:74px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -994px -89px transparent;"></div>
<div id="hplogo34" style="left:302px;top:51px;width:96px;height:86px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1089px -89px transparent;"></div>
<div id="hplogo35" style="left:302px;top:66px;width:98px;height:71px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1185px -89px transparent;"></div>
<div id="hplogo36" style="left:304px;top:67px;width:96px;height:69px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1283px -89px transparent;"></div>
<div id="hplogo37" style="left:301px;top:63px;width:96px;height:74px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1379px -89px transparent;"></div>
<div id="hplogo38" style="left:301px;top:58px;width:93px;height:79px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1475px -89px transparent;"></div>
<div id="hplogo39" style="left:291px;top:52px;width:94px;height:85px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1568px -89px transparent;"></div>
<div id="hplogo40" style="left:288px;top:50px;width:71px;height:88px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1662px -89px transparent;"></div>
<div id="hplogo41" style="left:285px;top:43px;width:76px;height:95px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1733px -89px transparent;"></div>
<div id="hplogo42" style="left:285px;top:37px;width:70px;height:101px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1809px -89px transparent;"></div>
<div id="hplogo43" style="left:281px;top:29px;width:55px;height:109px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1879px -89px transparent;"></div>
<div id="hplogo44" style="left:278px;top:20px;width:58px;height:119px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1934px -89px transparent;"></div>
<div id="hplogo45" style="left:278px;top:20px;width:55px;height:119px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1992px -89px transparent;"></div>
<div id="hplogo46" style="left:277px;top:12px;width:121px;height:127px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -208px transparent;"></div>
<div id="hplogo47" style="left:271px;top:2px;width:122px;height:138px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -121px -208px transparent;"></div>
<div id="hplogo48" style="left:267px;top:1px;width:126px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -243px -208px transparent;"></div>
<div id="hplogo49" style="left:264px;top:0px;width:136px;height:140px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -369px -208px transparent;"></div>
<div id="hplogo50" style="left:260px;top:0px;width:141px;height:140px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -505px -208px transparent;"></div>
<div id="hplogo51" style="left:255px;top:0px;width:148px;height:140px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -646px -208px transparent;"></div>
<div id="hplogo52" style="left:252px;top:0px;width:151px;height:140px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -794px -208px transparent;"></div>
<div id="hplogo53" style="left:249px;top:2px;width:121px;height:138px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -945px -208px transparent;"></div>
<div id="hplogo54" style="left:247px;top:3px;width:123px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1066px -208px transparent;"></div>
<div id="hplogo55" style="left:246px;top:3px;width:123px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1189px -208px transparent;"></div>
<div id="hplogo56" style="left:246px;top:2px;width:124px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1312px -208px transparent;"></div>
<div id="hplogo57" style="left:258px;top:2px;width:112px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1436px -208px transparent;"></div>
<div id="hplogo58" style="left:263px;top:2px;width:106px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1548px -208px transparent;"></div>
<div id="hplogo59" style="left:263px;top:2px;width:106px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1654px -208px transparent;"></div>
<div id="hplogo60" style="left:262px;top:2px;width:103px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1760px -208px transparent;"></div>
<div id="hplogo61" style="left:260px;top:2px;width:104px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1863px -208px transparent;"></div>
<div id="hplogo62" style="left:260px;top:2px;width:104px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1967px -208px transparent;"></div>
<div id="hplogo63" style="left:268px;top:2px;width:98px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -348px transparent;"></div>
<div id="hplogo64" style="left:267px;top:2px;width:99px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -98px -348px transparent;"></div>
<div id="hplogo65" style="left:266px;top:2px;width:97px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -197px -348px transparent;"></div>
<div id="hplogo66" style="left:266px;top:3px;width:96px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -294px -348px transparent;"></div>
<div id="hplogo67" style="left:264px;top:3px;width:99px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -390px -348px transparent;"></div>
<div id="hplogo68" style="left:263px;top:3px;width:100px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -489px -348px transparent;"></div>
<div id="hplogo69" style="left:261px;top:3px;width:100px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -589px -348px transparent;"></div>
<div id="hplogo70" style="left:259px;top:2px;width:138px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -689px -348px transparent;"></div>
<div id="hplogo71" style="left:254px;top:2px;width:126px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -827px -348px transparent;"></div>
<div id="hplogo72" style="left:247px;top:2px;width:101px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -953px -348px transparent;"></div>
<div id="hplogo73" style="left:240px;top:2px;width:108px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1054px -348px transparent;"></div>
<div id="hplogo74" style="left:238px;top:1px;width:110px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1162px -348px transparent;"></div>
<div id="hplogo75" style="left:230px;top:1px;width:118px;height:138px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1272px -348px transparent;"></div>
<div id="hplogo76" style="left:220px;top:15px;width:128px;height:124px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1390px -348px transparent;"></div>
<div id="hplogo77" style="left:211px;top:18px;width:137px;height:121px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1518px -348px transparent;"></div>
<div id="hplogo78" style="left:205px;top:43px;width:102px;height:96px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1655px -348px transparent;"></div>
<div id="hplogo79" style="left:202px;top:45px;width:104px;height:93px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1757px -348px transparent;"></div>
<div id="hplogo80" style="left:200px;top:38px;width:97px;height:101px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1861px -348px transparent;"></div>
<div id="hplogo81" style="left:198px;top:38px;width:104px;height:101px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1958px -348px transparent;"></div>
<div id="hplogo82" style="left:197px;top:39px;width:107px;height:100px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -486px transparent;"></div>
<div id="hplogo83" style="left:197px;top:39px;width:112px;height:100px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -107px -486px transparent;"></div>
<div id="hplogo84" style="left:213px;top:39px;width:94px;height:110px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -219px -486px transparent;"></div>
<div id="hplogo85" style="left:212px;top:40px;width:95px;height:111px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -313px -486px transparent;"></div>
<div id="hplogo86" style="left:211px;top:41px;width:97px;height:111px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -408px -486px transparent;"></div>
<div id="hplogo87" style="left:209px;top:42px;width:99px;height:112px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -505px -486px transparent;"></div>
<div id="hplogo88" style="left:209px;top:43px;width:98px;height:112px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -604px -486px transparent;"></div>
<div id="hplogo89" style="left:213px;top:43px;width:87px;height:112px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -702px -486px transparent;"></div>
<div id="hplogo90" style="left:213px;top:42px;width:83px;height:113px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -789px -486px transparent;"></div>
<div id="hplogo91" style="left:211px;top:40px;width:86px;height:109px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -872px -486px transparent;"></div>
<div id="hplogo92" style="left:211px;top:38px;width:86px;height:103px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -958px -486px transparent;"></div>
<div id="hplogo93" style="left:211px;top:37px;width:88px;height:112px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1044px -486px transparent;"></div>
<div id="hplogo94" style="left:211px;top:20px;width:186px;height:131px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1132px -486px transparent;"></div>
<div id="hplogo95" style="left:213px;top:27px;width:167px;height:122px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1318px -486px transparent;"></div>
<div id="hplogo96" style="left:212px;top:44px;width:87px;height:105px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1485px -486px transparent;"></div>
<div id="hplogo97" style="left:210px;top:44px;width:88px;height:98px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1572px -486px transparent;"></div>
<div id="hplogo98" style="left:195px;top:44px;width:106px;height:98px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1660px -486px transparent;"></div>
<div id="hplogo99" style="left:189px;top:44px;width:110px;height:98px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1766px -486px transparent;"></div>
<div id="hplogo100" style="left:182px;top:46px;width:117px;height:99px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1876px -486px transparent;"></div>
<div id="hplogo101" style="left:173px;top:44px;width:118px;height:96px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1993px -486px transparent;"></div>
<div id="hplogo102" style="left:161px;top:43px;width:130px;height:99px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -617px transparent;"></div>
<div id="hplogo103" style="left:154px;top:42px;width:137px;height:97px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -130px -617px transparent;"></div>
<div id="hplogo104" style="left:153px;top:42px;width:137px;height:97px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -267px -617px transparent;"></div>
<div id="hplogo105" style="left:153px;top:42px;width:137px;height:97px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -404px -617px transparent;"></div>
<div id="hplogo106" style="left:152px;top:41px;width:137px;height:98px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -541px -617px transparent;"></div>
<div id="hplogo107" style="left:151px;top:41px;width:137px;height:97px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -678px -617px transparent;"></div>
<div id="hplogo108" style="left:149px;top:41px;width:145px;height:97px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -815px -617px transparent;"></div>
<div id="hplogo109" style="left:148px;top:25px;width:144px;height:114px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -960px -617px transparent;"></div>
<div id="hplogo110" style="left:148px;top:13px;width:144px;height:126px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1104px -617px transparent;"></div>
<div id="hplogo111" style="left:141px;top:12px;width:153px;height:127px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1248px -617px transparent;"></div>
<div id="hplogo112" style="left:115px;top:11px;width:173px;height:128px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1401px -617px transparent;"></div>
<div id="hplogo113" style="left:108px;top:7px;width:180px;height:133px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1574px -617px transparent;"></div>
<div id="hplogo114" style="left:108px;top:4px;width:180px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1754px -617px transparent;"></div>
<div id="hplogo115" style="left:108px;top:3px;width:176px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1934px -617px transparent;"></div>
<div id="hplogo116" style="left:108px;top:1px;width:161px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -754px transparent;"></div>
<div id="hplogo117" style="left:105px;top:1px;width:235px;height:138px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -161px -754px transparent;"></div>
<div id="hplogo118" style="left:103px;top:1px;width:295px;height:148px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -396px -754px transparent;"></div>
<div id="hplogo119" style="left:103px;top:0px;width:277px;height:149px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -691px -754px transparent;"></div>
<div id="hplogo120" style="left:108px;top:0px;width:234px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -968px -754px transparent;"></div>
<div id="hplogo121" style="left:101px;top:0px;width:232px;height:137px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1202px -754px transparent;"></div>
<div id="hplogo122" style="left:99px;top:0px;width:135px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1434px -754px transparent;"></div>
<div id="hplogo123" style="left:95px;top:0px;width:244px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1569px -754px transparent;"></div>
<div id="hplogo124" style="left:81px;top:0px;width:152px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1813px -754px transparent;"></div>
<div id="hplogo125" style="left:69px;top:0px;width:164px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1965px -754px transparent;"></div>
<div id="hplogo126" style="left:66px;top:0px;width:169px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -903px transparent;"></div>
<div id="hplogo127" style="left:65px;top:0px;width:170px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -169px -903px transparent;"></div>
<div id="hplogo128" style="left:63px;top:0px;width:168px;height:138px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -339px -903px transparent;"></div>
<div id="hplogo129" style="left:61px;top:0px;width:159px;height:138px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -507px -903px transparent;"></div>
<div id="hplogo130" style="left:35px;top:0px;width:304px;height:139px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -666px -903px transparent;"></div>
<div id="hplogo131" style="left:19px;top:0px;width:189px;height:140px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -970px -903px transparent;"></div>
<div id="hplogo132" style="left:18px;top:11px;width:138px;height:129px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1159px -903px transparent;"></div>
<div id="hplogo133" style="left:18px;top:11px;width:137px;height:129px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1297px -903px transparent;"></div>
<div id="hplogo134" style="left:18px;top:11px;width:137px;height:128px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1434px -903px transparent;"></div>
<div id="hplogo135" style="left:18px;top:6px;width:135px;height:133px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1571px -903px transparent;"></div>
<div id="hplogo136" style="left:7px;top:4px;width:146px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1706px -903px transparent;"></div>
<div id="hplogo137" style="left:6px;top:4px;width:147px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1852px -903px transparent;"></div>
<div id="hplogo138" style="left:3px;top:4px;width:150px;height:136px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1999px -903px transparent;"></div>
<div id="hplogo139" style="left:3px;top:5px;width:150px;height:135px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -1043px transparent;"></div>
<div id="hplogo140" style="left:3px;top:8px;width:150px;height:132px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -150px -1043px transparent;"></div>
<div id="hplogo141" style="left:4px;top:6px;width:394px;height:145px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -300px -1043px transparent;"></div>
<div id="hplogo142" style="left:12px;top:6px;width:388px;height:145px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -694px -1043px transparent;"></div>
<div id="hplogo143" style="left:11px;top:8px;width:389px;height:144px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1082px -1043px transparent;"></div>
<div id="hplogo144" style="left:11px;top:8px;width:387px;height:144px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1471px -1043px transparent;"></div>
<div id="hplogo145" style="left:11px;top:8px;width:387px;height:143px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -1858px -1043px transparent;"></div>
<div id="hplogo146" style="left:10px;top:8px;width:113px;height:131px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll 0px -1188px transparent;"></div>
<div id="hplogo147" style="left:11px;top:8px;width:111px;height:131px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -113px -1188px transparent;"></div>
<div id="hplogo148" style="left:10px;top:9px;width:112px;height:130px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -224px -1188px transparent;"></div>
<div id="hplogo149" style="left:12px;top:9px;width:116px;height:130px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -336px -1188px transparent;"></div>
<div id="hplogo150" style="left:12px;top:9px;width:111px;height:130px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -452px -1188px transparent;"></div>
<div id="hplogo151" style="left:12px;top:9px;width:111px;height:130px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -563px -1188px transparent;"></div>
<div id="hplogo152" style="left:12px;top:9px;width:110px;height:131px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -674px -1188px transparent;"></div>
<div id="hplogo153" style="left:12px;top:34px;width:113px;height:106px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -784px -1188px transparent;"></div>
<div id="hplogo154" style="left:13px;top:35px;width:110px;height:104px;background:url(http://www.google.com.hk/logos/2011/graham11-hp-sprite.png) no-repeat scroll -897px -1188px transparent;"></div>
</div>
</body>
</html>
用到的素材图片
graham11-hp-sprite.png
graham11-hp-start.png
谢谢浏览！
作者：音乐让我说（音乐让我说 - 博客园）
出处：http://music.cnblogs.com/
文章版权归本人所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
