效果预览：
http://hovertree.com/texiao/js/5.htm

截图：

HTML文件代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>google LOGO纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰</title><base target="_blank" href="http://hovertree.com/texiao/js/" />

<script>

window.google = {

kEI: "3TLKTfD9DsmxcNrP7aIG", kEXPI: "17259,18167,28505,28555,29685,29795,29813,29957,30035,30107,30152,30205", kCSI: { e: "17259,18167,28505,28555,29685,29795,29813,29957,30035,30107,30152,30205", ei: "3TLKTfD9DsmxcNrP7aIG", expi: "17259,18167,28505,28555,29685,29795,29813,29957,30035,30107,30152,30205" }, 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: {}

};

</script>

<style>.hvtcenter{width:760px;margin:2px auto;}</style>

</head>

<body>

<div class="hvtcenter"><h2>google LOGO纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰</h2></div>

<center>

<br id="lgpd" clear="all">

<div id="lga">

<style>

#hplogo {

background: white;

cursor: pointer;

height: 156px;

position: relative;

width: 403px;

}

#hplogo div {

pointer-events: none;

position: absolute;

}

</style>

<div id="hplogo">

<a href="http://hovertree.com/texiao/js/5/logoinfo.htm"><img src="5/images/graham11-hp-start.png" alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" border="0"></a>

<div style="left: 307px; top: 48px; width: 88px; height: 89px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px 0px transparent;" id="hplogo0"></div>

<div style="left: 307px; top: 48px; width: 89px; height: 89px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -88px 0px transparent;" id="hplogo1"></div>

<div style="left: 307px; top: 48px; width: 91px; height: 89px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -177px 0px transparent;" id="hplogo2"></div>

<div style="left: 305px; top: 49px; width: 93px; height: 89px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -268px 0px transparent;" id="hplogo3"></div>

<div style="left: 305px; top: 50px; width: 93px; height: 88px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -361px 0px transparent;" id="hplogo4"></div>

<div style="left: 305px; top: 50px; width: 93px; height: 88px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -454px 0px transparent;" id="hplogo5"></div>

<div style="left: 306px; top: 52px; width: 92px; height: 86px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -547px 0px transparent;" id="hplogo6"></div>

<div style="left: 305px; top: 53px; width: 93px; height: 84px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -639px 0px transparent;" id="hplogo7"></div>

<div style="left: 305px; top: 54px; width: 94px; height: 83px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -732px 0px transparent;" id="hplogo8"></div>

<div style="left: 306px; top: 54px; width: 93px; height: 83px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -826px 0px transparent;" id="hplogo9"></div>

<div style="left: 307px; top: 54px; width: 92px; height: 83px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -919px 0px transparent;" id="hplogo10"></div>

<div style="left: 307px; top: 54px; width: 92px; height: 83px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1011px 0px transparent;" id="hplogo11"></div>

<div style="left: 308px; top: 54px; width: 90px; height: 83px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1103px 0px transparent;" id="hplogo12"></div>

<div style="left: 308px; top: 54px; width: 90px; height: 83px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1193px 0px transparent;" id="hplogo13"></div>

<div style="left: 306px; top: 53px; width: 91px; height: 84px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1283px 0px transparent;" id="hplogo14"></div>

<div style="left: 306px; top: 53px; width: 91px; height: 84px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1374px 0px transparent;" id="hplogo15"></div>

<div style="left: 308px; top: 53px; width: 90px; height: 84px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1465px 0px transparent;" id="hplogo16"></div>

<div style="left: 308px; top: 53px; width: 90px; height: 84px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1555px 0px transparent;" id="hplogo17"></div>

<div style="left: 305px; top: 53px; width: 92px; height: 84px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1645px 0px transparent;" id="hplogo18"></div>

<div style="left: 305px; top: 52px; width: 92px; height: 85px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1737px 0px transparent;" id="hplogo19"></div>

<div style="left: 306px; top: 52px; width: 91px; height: 85px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1829px 0px transparent;" id="hplogo20"></div>

<div style="left: 308px; top: 51px; width: 88px; height: 87px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1920px 0px transparent;" id="hplogo21"></div>

<div style="left: 308px; top: 50px; width: 88px; height: 88px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -89px transparent;" id="hplogo22"></div>

<div style="left: 308px; top: 49px; width: 88px; height: 88px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -88px -89px transparent;" id="hplogo23"></div>

<div style="left: 307px; top: 49px; width: 89px; height: 88px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -176px -89px transparent;" id="hplogo24"></div>

<div style="left: 307px; top: 50px; width: 89px; height: 87px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -265px -89px transparent;" id="hplogo25"></div>

<div style="left: 308px; top: 51px; width: 89px; height: 86px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -354px -89px transparent;" id="hplogo26"></div>

<div style="left: 307px; top: 54px; width: 90px; height: 83px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -443px -89px transparent;" id="hplogo27"></div>

<div style="left: 307px; top: 57px; width: 90px; height: 80px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -533px -89px transparent;" id="hplogo28"></div>

<div style="left: 306px; top: 58px; width: 92px; height: 79px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -623px -89px transparent;" id="hplogo29"></div>

<div style="left: 306px; top: 58px; width: 92px; height: 79px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -715px -89px transparent;" id="hplogo30"></div>

<div style="left: 305px; top: 60px; width: 92px; height: 77px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -807px -89px transparent;" id="hplogo31"></div>

<div style="left: 302px; top: 61px; width: 95px; height: 76px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -899px -89px transparent;" id="hplogo32"></div>

<div style="left: 302px; top: 63px; width: 95px; height: 74px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -994px -89px transparent;" id="hplogo33"></div>

<div style="left: 302px; top: 51px; width: 96px; height: 86px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1089px -89px transparent;" id="hplogo34"></div>

<div style="left: 302px; top: 66px; width: 98px; height: 71px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1185px -89px transparent;" id="hplogo35"></div>

<div style="left: 304px; top: 67px; width: 96px; height: 69px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1283px -89px transparent;" id="hplogo36"></div>

<div style="left: 301px; top: 63px; width: 96px; height: 74px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1379px -89px transparent;" id="hplogo37"></div>

<div style="left: 301px; top: 58px; width: 93px; height: 79px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1475px -89px transparent;" id="hplogo38"></div>

<div style="left: 291px; top: 52px; width: 94px; height: 85px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1568px -89px transparent;" id="hplogo39"></div>

<div style="left: 288px; top: 50px; width: 71px; height: 88px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1662px -89px transparent;" id="hplogo40"></div>

<div style="left: 285px; top: 43px; width: 76px; height: 95px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1733px -89px transparent;" id="hplogo41"></div>

<div style="left: 285px; top: 37px; width: 70px; height: 101px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1809px -89px transparent;" id="hplogo42"></div>

<div style="left: 281px; top: 29px; width: 55px; height: 109px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1879px -89px transparent;" id="hplogo43"></div>

<div style="left: 278px; top: 20px; width: 58px; height: 119px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1934px -89px transparent;" id="hplogo44"></div>

<div style="left: 278px; top: 20px; width: 55px; height: 119px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1992px -89px transparent;" id="hplogo45"></div>

<div style="left: 277px; top: 12px; width: 121px; height: 127px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -208px transparent;" id="hplogo46"></div>

<div style="left: 271px; top: 2px; width: 122px; height: 138px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -121px -208px transparent;" id="hplogo47"></div>

<div style="left: 267px; top: 1px; width: 126px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -243px -208px transparent;" id="hplogo48"></div>

<div style="left: 264px; top: 0px; width: 136px; height: 140px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -369px -208px transparent;" id="hplogo49"></div>

<div style="left: 260px; top: 0px; width: 141px; height: 140px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -505px -208px transparent;" id="hplogo50"></div>

<div style="left: 255px; top: 0px; width: 148px; height: 140px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -646px -208px transparent;" id="hplogo51"></div>

<div style="left: 252px; top: 0px; width: 151px; height: 140px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -794px -208px transparent;" id="hplogo52"></div>

<div style="left: 249px; top: 2px; width: 121px; height: 138px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -945px -208px transparent;" id="hplogo53"></div>

<div style="left: 247px; top: 3px; width: 123px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1066px -208px transparent;" id="hplogo54"></div>

<div style="left: 246px; top: 3px; width: 123px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1189px -208px transparent;" id="hplogo55"></div>

<div style="left: 246px; top: 2px; width: 124px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1312px -208px transparent;" id="hplogo56"></div>

<div style="left: 258px; top: 2px; width: 112px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1436px -208px transparent;" id="hplogo57"></div>

<div style="left: 263px; top: 2px; width: 106px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1548px -208px transparent;" id="hplogo58"></div>

<div style="left: 263px; top: 2px; width: 106px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1654px -208px transparent;" id="hplogo59"></div>

<div style="left: 262px; top: 2px; width: 103px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1760px -208px transparent;" id="hplogo60"></div>

<div style="left: 260px; top: 2px; width: 104px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1863px -208px transparent;" id="hplogo61"></div>

<div style="left: 260px; top: 2px; width: 104px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1967px -208px transparent;" id="hplogo62"></div>

<div style="left: 268px; top: 2px; width: 98px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -348px transparent;" id="hplogo63"></div>

<div style="left: 267px; top: 2px; width: 99px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -98px -348px transparent;" id="hplogo64"></div>

<div style="left: 266px; top: 2px; width: 97px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -197px -348px transparent;" id="hplogo65"></div>

<div style="left: 266px; top: 3px; width: 96px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -294px -348px transparent;" id="hplogo66"></div>

<div style="left: 264px; top: 3px; width: 99px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -390px -348px transparent;" id="hplogo67"></div>

<div style="left: 263px; top: 3px; width: 100px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -489px -348px transparent;" id="hplogo68"></div>

<div style="left: 261px; top: 3px; width: 100px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -589px -348px transparent;" id="hplogo69"></div>

<div style="left: 259px; top: 2px; width: 138px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -689px -348px transparent;" id="hplogo70"></div>

<div style="left: 254px; top: 2px; width: 126px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -827px -348px transparent;" id="hplogo71"></div>

<div style="left: 247px; top: 2px; width: 101px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -953px -348px transparent;" id="hplogo72"></div>

<div style="left: 240px; top: 2px; width: 108px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1054px -348px transparent;" id="hplogo73"></div>

<div style="left: 238px; top: 1px; width: 110px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1162px -348px transparent;" id="hplogo74"></div>

<div style="left: 230px; top: 1px; width: 118px; height: 138px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1272px -348px transparent;" id="hplogo75"></div>

<div style="left: 220px; top: 15px; width: 128px; height: 124px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1390px -348px transparent;" id="hplogo76"></div>

<div style="left: 211px; top: 18px; width: 137px; height: 121px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1518px -348px transparent;" id="hplogo77"></div>

<div style="left: 205px; top: 43px; width: 102px; height: 96px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1655px -348px transparent;" id="hplogo78"></div>

<div style="left: 202px; top: 45px; width: 104px; height: 93px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1757px -348px transparent;" id="hplogo79"></div>

<div style="left: 200px; top: 38px; width: 97px; height: 101px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1861px -348px transparent;" id="hplogo80"></div>

<div style="left: 198px; top: 38px; width: 104px; height: 101px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1958px -348px transparent;" id="hplogo81"></div>

<div style="left: 197px; top: 39px; width: 107px; height: 100px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -486px transparent;" id="hplogo82"></div>

<div style="left: 197px; top: 39px; width: 112px; height: 100px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -107px -486px transparent;" id="hplogo83"></div>

<div style="left: 213px; top: 39px; width: 94px; height: 110px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -219px -486px transparent;" id="hplogo84"></div>

<div style="left: 212px; top: 40px; width: 95px; height: 111px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -313px -486px transparent;" id="hplogo85"></div>

<div style="left: 211px; top: 41px; width: 97px; height: 111px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -408px -486px transparent;" id="hplogo86"></div>

<div style="left: 209px; top: 42px; width: 99px; height: 112px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -505px -486px transparent;" id="hplogo87"></div>

<div style="left: 209px; top: 43px; width: 98px; height: 112px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -604px -486px transparent;" id="hplogo88"></div>

<div style="left: 213px; top: 43px; width: 87px; height: 112px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -702px -486px transparent;" id="hplogo89"></div>

<div style="left: 213px; top: 42px; width: 83px; height: 113px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -789px -486px transparent;" id="hplogo90"></div>

<div style="left: 211px; top: 40px; width: 86px; height: 109px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -872px -486px transparent;" id="hplogo91"></div>

<div style="left: 211px; top: 38px; width: 86px; height: 103px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -958px -486px transparent;" id="hplogo92"></div>

<div style="left: 211px; top: 37px; width: 88px; height: 112px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1044px -486px transparent;" id="hplogo93"></div>

<div style="left: 211px; top: 20px; width: 186px; height: 131px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1132px -486px transparent;" id="hplogo94"></div>

<div style="left: 213px; top: 27px; width: 167px; height: 122px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1318px -486px transparent;" id="hplogo95"></div>

<div style="left: 212px; top: 44px; width: 87px; height: 105px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1485px -486px transparent;" id="hplogo96"></div>

<div style="left: 210px; top: 44px; width: 88px; height: 98px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1572px -486px transparent;" id="hplogo97"></div>

<div style="left: 195px; top: 44px; width: 106px; height: 98px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1660px -486px transparent;" id="hplogo98"></div>

<div style="left: 189px; top: 44px; width: 110px; height: 98px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1766px -486px transparent;" id="hplogo99"></div>

<div style="left: 182px; top: 46px; width: 117px; height: 99px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1876px -486px transparent;" id="hplogo100"></div>

<div style="left: 173px; top: 44px; width: 118px; height: 96px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1993px -486px transparent;" id="hplogo101"></div>

<div style="left: 161px; top: 43px; width: 130px; height: 99px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -617px transparent;" id="hplogo102"></div>

<div style="left: 154px; top: 42px; width: 137px; height: 97px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -130px -617px transparent;" id="hplogo103"></div>

<div style="left: 153px; top: 42px; width: 137px; height: 97px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -267px -617px transparent;" id="hplogo104"></div>

<div style="left: 153px; top: 42px; width: 137px; height: 97px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -404px -617px transparent;" id="hplogo105"></div>

<div style="left: 152px; top: 41px; width: 137px; height: 98px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -541px -617px transparent;" id="hplogo106"></div>

<div style="left: 151px; top: 41px; width: 137px; height: 97px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -678px -617px transparent;" id="hplogo107"></div>

<div style="left: 149px; top: 41px; width: 145px; height: 97px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -815px -617px transparent;" id="hplogo108"></div>

<div style="left: 148px; top: 25px; width: 144px; height: 114px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -960px -617px transparent;" id="hplogo109"></div>

<div style="left: 148px; top: 13px; width: 144px; height: 126px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1104px -617px transparent;" id="hplogo110"></div>

<div style="left: 141px; top: 12px; width: 153px; height: 127px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1248px -617px transparent;" id="hplogo111"></div>

<div style="left: 115px; top: 11px; width: 173px; height: 128px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1401px -617px transparent;" id="hplogo112"></div>

<div style="left: 108px; top: 7px; width: 180px; height: 133px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1574px -617px transparent;" id="hplogo113"></div>

<div style="left: 108px; top: 4px; width: 180px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1754px -617px transparent;" id="hplogo114"></div>

<div style="left: 108px; top: 3px; width: 176px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1934px -617px transparent;" id="hplogo115"></div>

<div style="left: 108px; top: 1px; width: 161px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -754px transparent;" id="hplogo116"></div>

<div style="left: 105px; top: 1px; width: 235px; height: 138px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -161px -754px transparent;" id="hplogo117"></div>

<div style="left: 103px; top: 1px; width: 295px; height: 148px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -396px -754px transparent;" id="hplogo118"></div>

<div style="left: 103px; top: 0px; width: 277px; height: 149px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -691px -754px transparent;" id="hplogo119"></div>

<div style="left: 108px; top: 0px; width: 234px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -968px -754px transparent;" id="hplogo120"></div>

<div style="left: 101px; top: 0px; width: 232px; height: 137px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1202px -754px transparent;" id="hplogo121"></div>

<div style="left: 99px; top: 0px; width: 135px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1434px -754px transparent;" id="hplogo122"></div>

<div style="left: 95px; top: 0px; width: 244px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1569px -754px transparent;" id="hplogo123"></div>

<div style="left: 81px; top: 0px; width: 152px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1813px -754px transparent;" id="hplogo124"></div>

<div style="left: 69px; top: 0px; width: 164px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1965px -754px transparent;" id="hplogo125"></div>

<div style="left: 66px; top: 0px; width: 169px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -903px transparent;" id="hplogo126"></div>

<div style="left: 65px; top: 0px; width: 170px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -169px -903px transparent;" id="hplogo127"></div>

<div style="left: 63px; top: 0px; width: 168px; height: 138px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -339px -903px transparent;" id="hplogo128"></div>

<div style="left: 61px; top: 0px; width: 159px; height: 138px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -507px -903px transparent;" id="hplogo129"></div>

<div style="left: 35px; top: 0px; width: 304px; height: 139px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -666px -903px transparent;" id="hplogo130"></div>

<div style="left: 19px; top: 0px; width: 189px; height: 140px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -970px -903px transparent;" id="hplogo131"></div>

<div style="left: 18px; top: 11px; width: 138px; height: 129px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1159px -903px transparent;" id="hplogo132"></div>

<div style="left: 18px; top: 11px; width: 137px; height: 129px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1297px -903px transparent;" id="hplogo133"></div>

<div style="left: 18px; top: 11px; width: 137px; height: 128px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1434px -903px transparent;" id="hplogo134"></div>

<div style="left: 18px; top: 6px; width: 135px; height: 133px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1571px -903px transparent;" id="hplogo135"></div>

<div style="left: 7px; top: 4px; width: 146px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1706px -903px transparent;" id="hplogo136"></div>

<div style="left: 6px; top: 4px; width: 147px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1852px -903px transparent;" id="hplogo137"></div>

<div style="left: 3px; top: 4px; width: 150px; height: 136px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1999px -903px transparent;" id="hplogo138"></div>

<div style="left: 3px; top: 5px; width: 150px; height: 135px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -1043px transparent;" id="hplogo139"></div>

<div style="left: 3px; top: 8px; width: 150px; height: 132px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -150px -1043px transparent;" id="hplogo140"></div>

<div style="left: 4px; top: 6px; width: 394px; height: 145px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -300px -1043px transparent;" id="hplogo141"></div>

<div style="left: 12px; top: 6px; width: 388px; height: 145px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -694px -1043px transparent;" id="hplogo142"></div>

<div style="left: 11px; top: 8px; width: 389px; height: 144px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1082px -1043px transparent;" id="hplogo143"></div>

<div style="left: 11px; top: 8px; width: 387px; height: 144px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1471px -1043px transparent;" id="hplogo144"></div>

<div style="left: 11px; top: 8px; width: 387px; height: 143px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -1858px -1043px transparent;" id="hplogo145"></div>

<div style="left: 10px; top: 8px; width: 113px; height: 131px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll 0px -1188px transparent;" id="hplogo146"></div>

<div style="left: 11px; top: 8px; width: 111px; height: 131px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -113px -1188px transparent;" id="hplogo147"></div>

<div style="left: 10px; top: 9px; width: 112px; height: 130px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -224px -1188px transparent;" id="hplogo148"></div>

<div style="left: 12px; top: 9px; width: 116px; height: 130px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -336px -1188px transparent;" id="hplogo149"></div>

<div style="left: 12px; top: 9px; width: 111px; height: 130px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -452px -1188px transparent;" id="hplogo150"></div>

<div style="left: 12px; top: 9px; width: 111px; height: 130px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -563px -1188px transparent;" id="hplogo151"></div>

<div style="left: 12px; top: 9px; width: 110px; height: 131px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -674px -1188px transparent;" id="hplogo152"></div>

<div style="left: 12px; top: 34px; width: 113px; height: 106px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -784px -1188px transparent;" id="hplogo153"></div>

<div style="left: 13px; top: 35px; width: 110px; height: 104px; background: url(5/images/graham11-hp-sprite.png) no-repeat scroll -897px -1188px transparent;" id="hplogo154"></div>

</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("http://www.google.com.hk//search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN"):window.location.href="http://www.google.com.hk//search?q=%E7%8E%9B%E8%8E%8E%C2%B7%E8%91%9B%E5%85%B0%E5%A7%86&ct=graham11-hp&oi=ddle&hl=zh-CN"},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(5/images/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="5/images/graham11-hp-sprite.png"}}catch(o){google.ml(o,!1,{cause:"DOODLE"})};})();</script>

</div>

</center>

<div class="hvtcenter">

<p>代码整理：<a href="http://hovertree.com/">HoverTree</a></p>

<p></p>

<p>为纪念美国现代舞舞蹈家玛莎&middot;葛兰姆诞辰，Google Doodle推出了一款极其炫酷的LOGO，整个LOGO使用了CSS Sprite技术，利用一个初始图片和一张画满各个动作的拼接图片，实现了动画，而非传统的GIF动画图像。<p />

<p>玛莎&middot;葛兰姆(英语：Martha Graham，1894年5月11日-1991年4月1日)，美国舞蹈家和编舞家，也是现代舞蹈史上最早的创始人之一。</p>

<p><a href="http://hovertree.com/menu/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/wtryxqnu.htm">原文</a> <a href="http://keleyi.com">柯乐义</a></p>

</div>

</body>

</html>

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

Google LOGO现代舞舞蹈动画的更多相关文章

  1. 飞机大战（1）--添加logo和加载动画

    注:以下代码都是用scratch 3.0版本编写 素材链接: 链接:https://pan.baidu.com/s/1sXqeZVuFgVTYT0OtqxXilw 提取码:1126 一.背景添加 导入 ...

  2. DIY固件系列教程——实现开机LOGO三屏动画的完全替换【转】

    本文转载自:http://blog.csdn.net/sdgaojian/article/details/9192433 本教程需要用到如下工具:1,7Z压缩工具2,AddCrc32效验工具3,raw ...

  3. 安卓开机logo和开机动画的几种实现方法

    安卓4.2可用方法2-4,第一种方法未验证. 从理论上来说,android 有4个开机启动画面. 第一个应该是U-BOOT的启动画面,有些设备为了满足按动电源即有显示,在UBOOT里加了开机画面,实现 ...

  4. 安卓修改开机logo和开机动画的方法

    第一种和第二种方法亲测可用,安卓版本是4.2和安卓5.1均可.第二种方法待验证 以下三种方法 Android 开机其实总共会出现3个画面: 1.第一个就是 linux 系统启动,出现Linux小企鹅画 ...

  5. WPF——Sharder实现Logo走光动画

    利用WPF的走光动画实现的走光动画. 资源  实例程序 示例代码 LogoEffect logoEffect = }; //要添加走光动画的物体 logo.Effect = logoEffect; D ...

  6. Android5.1开机LOGO与开机动画【转】

    本文转载自:http://blog.csdn.net/u014770862/article/details/52624627 android5.1中,开机LOGO部分和之前版本的并不相同,主要区别在于 ...

  7. kernel logo到开机动画之间闪现黑屏（android 5.X）

    在BootAnimation開始画图之前,会先做一次clear screen的动作,避免出现前面的图干扰到BootAnimation的显示. 通过check main_log先确认播放开机动画是哪个f ...

  8. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  9. CSS3 animation 动画

    今天看到一个很酷的logo看了下他用的是animation 动画效果,就拿来做例子 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 animation 属 ...

随机推荐

  1. 使用JAVA编写电话薄程序，具备添加，查找，删除等功能

    //该程序需要连接数据库.根据word文档要求所有功能均已实现.//大部分方法基本差不多,//在查询修改的时候能输出 最大ID号 和最小ID号,并且可以对输入的ID号进行判断是否存在(具体方法请查看 ...

  2. 浅谈ThinkPHP3.2的子域名部署和路由优化（一）

    前言:建立一个网站系统,往往包含多个子网站,例如PC官网,移动端官网,后台管理,数据源自一个相同的数据库,整个架构上,从ThinkPHP来看,可以大体理解为Model(M)是一样的,Controlle ...

  3. The transaction log for database 'tempdb' is full due to 'ACTIVE_TRANSACTION'

    今天早上,Dev跟我说,执行query statement时出现一个error,detail info是: “The transaction log for database 'tempdb' is ...

  4. Cordova+Asp.net Mvc+GIS跨平台移动应用开发实战1-系统初步搭建（附演示,apk,全部源码）

    1.前言 身处在移动互联网的今天,移动应用开发炙手可热,身为程序猿的我们怎么能错过开发一款我们自己的APP.本人算是一个基于.net的GIS开发入门者(马上就大四啦), 暑假在学校参加GIS比赛有大把 ...

  5. 解决adb.exe' and can be executed.

    百度google大家多说的是任务管理器 kill掉adb 或者重启adb server,但我任务管理器就没有adb ,猜测是某个程序占用了adb端口.于是按此思路查找. 5037为adb默认端口 查看 ...

  6. OpenGL Shader in OpenCASCADE

    OpenGL Shader in OpenCASCADE eryar@163.com Abstract. As implementation of one of the strategic steps ...

  7. IOS学习之NSNotificationCenter消息机制

    NSNotificationCenter是 Cococa消息中心,统一管理单进程内不同线程的消息通迅. 添加观察者接收通知: //添加通知中心观察者 [[NSNotificationCenter de ...

  8. 虚拟化 - 每天5分钟玩转 OpenStack（2）

    OpenStack是云操作系统,要学习OpenStack,首先需要掌握一些虚拟化和云计算的相关知识. 虚拟化 虚拟化是云计算的基础.简单的说,虚拟化使得在一台物理的服务器上可以跑多台虚拟机,虚拟机共享 ...

  9. ASP.NET MVC之Session State性能问题（七）

    前言 这一节翻译一篇有关Session State性能问题的文章,非一字一句翻译. 话题 不知道我们在真实环境中是否用到了Session State特性,它主要用来当在同一浏览器发出多个请求时来存储数 ...

  10. Vim 快速上手

    1.vi的基本概念 基本上vi可以分为三种状态,分别是 命令模式(command mode) 插入模式(Insert mode) 底行模式(last line mode) 1) 命令行模式comman ...