Google LOGO现代舞舞蹈动画

效果预览：
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

时间： 2024-10-26 11:56:02

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

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

本文转载自:http://blog.csdn.net/u014770862/article/details/52624627 android5.1中,开机LOGO部分和之前版本的并不相同,主要区别在于Android LOGO显示部分.此博客所讲之处若有错误,敬请原谅,谢谢! 开机LOGO一般有两种:静态的和动态的,android开机时共有三种LOGO(5.1之前可能算是4种吧). 1. uboot显示 2. kernel显示 3. android开机动画 一般情况下将前两幅图做成一样的,第三个就

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

在BootAnimation开始绘图之前,会先做一次clear screen的动作,避免出现前面的图干扰到BootAnimation的显示. 通过check main_log先确认播放开机动画是哪个function,在对应function删除clear screen的动作的对应代码. /frameworks/base/cmds/bootanimation/BootAnimation.cpp 450bool BootAnimation::android() 451{ 452 initTexture

简单CSS技巧实现的Logo动画效果（很像导航栏上经常运用的效果，但有差别）

之前不少人提过说要实现像阿里百秀Logo那样的动画效果,为了满足广大用户的需求,这里就简单做个演示.东西相对较简单,所以不要认为你搞不定它. 下面是演示的案例代码 1 <style> 2 .imlogo{ 3 display:block; 4 width:160px; 5 height:80px; 6 background:#FF5E52 url(logo2.png) center 22px no-repeat; /* 写法一般是 先水平位置 ,然后垂直位置*/ 7 -webkit-trans

Google的量子计算之梦：比传统计算机快上1亿倍？

Google的量子计算之梦:比传统计算机快上1亿倍? 本文来自technologyreview,作者 Tom Simonite ,机器之心编译出品,参与:salmoner,薛矽,汪汪,微胖. 近日,谷歌宣布他们的量子计算机比传统计算机快上1亿倍,有人欢呼雀跃,有人提出质疑.让我们来看看背后的故事吧,看看物理学家John Martinis 如何帮谷歌实现炙手可热的量子计算之梦.他或许正手握着量子计算的圣杯,本文选自麻省理工科技评论. Martini团队追寻的神奇计算机 John Martinis用

jsoup httpclient 爬取网页并下载google图标

jsoup下载地址 http://www.jsoup.org httpclient下载地址 http://hc.apache.org/downloads.cgi 其他jar包见附件 Crawler package jsoup; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.HashMap;

简析iOS动画原理及实现——Core Animation

本文转载至 http://www.tuicool.com/articles/e2qaYjA 原文  https://tech.imdada.cn/2016/06/21/ios-core-animation/ 主题 Core Animation 背景 随着达达业务的扩大,越来越多的人开始使用达达客户端,参加到众包物流的行业中.达达客户端分为iOS平台和安卓平台. APP开发也从快速迭代的粗旷性开发转向高可复用,提升用户提现的精细化方向发展.iOS动画交互良好,使用广泛,良好的用户体验离不开流畅的界

Android 实现个性的ViewPager切换动画 实战PageTransformer（兼容Android3.0以下）

1.介绍如何使用setPageTransformer设置切换动画: 2.自定义PageTransformer实现个性的切换动画: 3.该方法在SDK11以下的版本不起作用,我们会对其做一定修改,让其向下兼容. 官方示例地址:http://developer.android.com/training/animation/screen-slide.html 有兴趣的可以去看看~~ 好了,下面开始编写代码~~ 2.setPageTransformer的使用 首先我们迅速的实现一个传统的ViewPage

Android系统的定制---定制系统开机动画

4.3定制Android平台系统 通常产品厂商在拿到Android源码后会在Android源码基础上进行定制修改,以匹配适应自己的产品,从本节开始,我们从最原始的Android源码系统里一步一步定制出自己的Android系统.本节主要内容包含:根据Android源码,添加新产品编译项,定制系统启动界面和文字,定制系统启动动画和声音,定制系统桌面. 4.3.1添加新产品编译项 Android系统的源代码是一个逻辑结构非常独立工程,在一套Android源码中可以编译出多个产品映像,在需要编译某一个产

如何使用SVG生成超酷的页面预加载素描动画效果

在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索.索引.脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 3 浏览器支持 Internet Exp