使用CSS3来绘制一个月食图案

css3的animation是个好东西，之前应景的七夕表白爱心图。(都是中午午休时候的突发奇想。)
想想，应该在很多应节场合用css玩点有意思的。
突然想到上次的月食,那就玩玩。
看了一个div的炫技网站.
画个月亮嘛，还是尝试用一个div来实现，主div做背景黑夜，before做月亮，after做挡住月亮的黑影。
用position控制位置，用animation控制动画。

1. .moonback{   
2.     width: 600px;   
3.     height: 600px;   
4.     background-color: #000;   
5.     margin: 0 auto;   
6.   
7.     position: relative;   
8.   
9.   }   
10.   .moonback::before{   
11.     content: ",";   
12.     display: block;   
13.     position: absolute;   
14.     left: 200px;   
15.     top: 100px;   
16.   
17.     width: 200px;   
18.     height: 200px;   
19.     background-color: #ff0;   
20.     border-radius: 100px;   
21.   }   
22.   .moonback::after{   
23.     content: " ";   
24.     display: block;   
25.     position: absolute;   
26.     left: 26px;   
27.     top: 0px;   
28.   
29.     width: 200px;   
30.     height: 200px;   
31.     background-color: #000;   
32.     border-radius: 100px;   
33.   
34.     -webkit-animation: 8s dog linear infinite;   
35.     -moz-animation: 8s dog linear infinite;   
36.     animation: 8s dog linear infinite;   
37.   }   
38.   
39.   @-webkit-keyframes dog {   
40.     0% {    
41.       left:27px;   
42.       top: 0px;   
43.     }   
44.     100% {    
45.       left: 399px;   
46.       top: 216px;   
47.     }   
48.   }   
49.   @-moz-keyframes dog {   
50.     0% {    
51.       left:27px;   
52.       top: 0px;   
53.     }   
54.     100% {    
55.       left: 399px;   
56.       top: 216px;