Yesterday is said to be an eclipse of XXX or something, so I learned about css3 and realized it.
The implementation principle is very simple. cover a small circle with a large circle. = ·:
Use a WebKit-based browser for testing. If you need other browsers, you can change the corresponding prefix (-WebKit,-Moz,-O)
Demo address: http://fronter.sinaapp.com/wp-content/demo/eclipse.html
Final effect:
Demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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%; width: 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; width: 300px; height: 300px; border-radius: 150px; background: #000;
}
#orbit{
position: relative; top:-1000px; width: 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>
<body>
<div id="earth">
<div id="moon">
</div>
<div id="orbit">
<div id="dog"></div>
</div>
</div>
<script type="text/javascript">
var dog = document.getElementById('dog');
</script>
</body>
For more information, see http://www.cnblogs.com/xesam /]
Address: http://www.cnblogs.com/xesam/archive/2011/12/11/2283712.html