昨天据说是XXX什么的月食，于是学习CSS3的时候也实现一个，全当练手。
实现原理很简单，用一个大圆覆盖一个小圆···=。=·：
用基于webkit的浏览器测试，需要其他的浏览器可以更改对应的前缀（-webkit，-moz，-o）
演示地址：http://fronter.sinaapp.com/wp-content/demo/eclipse.html
最终效果：
demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
body{ background: #000;}
#earth{position: relative; margin-top: 200px; }
#moon{
position: absolute; top:-90px; left: 50%; 180px; height: 180px; margin-left: -90px;
border-radius: 100px;
background: -webkit-gradient(linear, left bottom, right top, from(#BDA08D), to(#fff));
box-shadow: 0 0 30px #D4D4D4;
}
#lovers{
position: absolute;
top:73px;
border-radius: 0 0 0 90px;
-webkit-transform:rotate(-1deg);
}
#dog{
position: absolute; top:850px; left: 400px; 300px; height: 300px; border-radius: 150px; background: #000;
}
#orbit{
position: relative; top:-1000px; 1000px; height: 1000px; margin: 0 auto; border-radius: 500px;
-webkit-animation-name:eclipse;
-webkit-animation-duration:20s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes eclipse{
0%{-webkit-transform: rotate(-30deg);}
20%{-webkit-transform: rotate(-15deg);}
40%{-webkit-transform: rotate(0deg);}
60%{-webkit-transform: rotate(15deg);}
80%{-webkit-transform: rotate(30deg);}
100%{-webkit-transform: rotate(45deg);}
}
</style>
</head>
<body>
<div id="earth">
<div id="moon">
<img id="lovers" src="http://images.cnblogs.com/cnblogs_com/xesam/341774/r_%E6%9C%AA%E6%A0%87%E9%A2%98-2.png" width="100" alt="" />
</div>
<div id="orbit">
<div id="dog"></div>
</div>
</div>
<script type="text/javascript">
var dog = document.getElementById('dog');
</script>
</body>
</html>
转载请注明来自小西山子【http://www.cnblogs.com/xesam/】
本文地址：http://www.cnblogs.com/xesam/archive/2011/12/11/2283712.html