Google 首页用 Javascript 和 Css 实现舞蹈家跳舞的动画

代码如下：

<!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 >
		<img border="0" title="现代舞先驱玛莎·葛兰姆 117 周年诞辰" alt="现代舞先驱玛莎·葛兰姆 117 周年诞辰" src="http://www.google.com.hk/logos/2011/graham11-hp-start.png">
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
		<div ></div>
	</div>
</body>
</html>

用到的素材图片

graham11-hp-sprite.png

Google 首页用 Javascript 和 Css 实现舞蹈家跳舞的动画

graham11-hp-start.png

Google 首页用 Javascript 和 Css 实现舞蹈家跳舞的动画

附件下载：https://files.cnblogs.com/Music/%E8%B0%B7%E6%AD%8C%E9%A6%96%E9%A1%B5%E8%88%9E%E8%B9%88%E5%AE%B6%E5%8A%A8%E7%94%BB.zip

谢谢浏览！