太阳地球月亮运行动画（使用@keyframes）

闲来无事的demo
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         body{
 8             background: #000;
 9         }
10         .sun{
11              280px;
12             height: 280px;
13             margin-top: 200px;
14             margin-left: 300px;
15             border:1px solid #FFA500;
16             background:#FFA500;
17             border-radius: 50%;
18             box-shadow:0px 0px 35px #FFA500;
19             animation:action 10s;
20             animation-iteration-count:infinite;
21             animation-timing-function:linear;
22         }
23         @keyframes action{
24             0% { transform: rotate(0deg) }
25             100% { transform: rotate(360deg)}
26         }
27         .earth{
28             border:1px solid #0000CC;
29             background:#0000CC;
30             box-shadow:0px 0px 35px #0000CC;
31              40px;
32             height: 40px;
33             border-radius: 50%;
34             margin-left: -90px;
35             animation:actions 5s;
36             animation-iteration-count:infinite;
37             animation-timing-function:linear;
38         }
39         @keyframes actions{
40             0% { transform: rotate(0deg) }
41             100% { transform: rotate(360deg)}
42         }
43         .moon{
44             border:1px solid #F0F0F0;
45             background:#F0F0F0;
46             box-shadow:0px 0px 35px #F0F0F0;
47              10px;
48             height: 10px;
49             border-radius: 50%;
50             margin-left: -20px;
51         }
52     </style>
53 </head>
54 <body>
55 
56 <div class="sun">
57     <div class="earth">
58         <div class="moon"></div>
59     </div>
60 </div>
61 
62 </body>
63 </html>
View Code