闲来无事的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>