演示：http://blog.mazzz.cc/h5/taiyangxi.html
源代码
<head>
<meta charset="UTF-8" />
<title>
太阳系
</title>
<style>
*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;}html,body{height:100%;width:100%;}body{font:normal
1em/1.45em 'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;color:#fff;background:radial-gradient(
ellipse at bottom,#1c2837 0%,#050608 100% );background-attachment:fixed;}.solar-syst{margin:0
auto;width:100%;height:100%;position:relative;}.solar-syst:after{content:'';position:absolute;height:2px;width:2px;top:-2px;background:white;border-radius:100px;}.solar-syst
div{border-radius:1000px;top:50%;left:50%;position:absolute;z-index:999;}.solar-syst
div:not(.sun){border:1px solid rgba(102,166,229,0.12);}.solar-syst div:not(.sun):before{left:50%;border-radius:100px;content:'';position:absolute;}.solar-syst
div:not(.asteroids-belt):before{box-shadow:inset 0 6px 0 -2px rgba(0,0,0,0.25);}.sun{background:radial-gradient(
ellipse at center,#ffd000 1%,#f9b700 39%,#f9b700 39%,#e06317 100% );height:40px;width:40px;margin-top:-20px;margin-left:-20px;background-clip:padding-box;border:0
!important;background-position:-28px -103px;background-size:175%;box-shadow:0
0 10px 2px rgba(255,107,0,0.4),0 0 22px 11px rgba(255,203,0,0.13);}.mercury{height:70px;width:70px;margin-top:-35px;margin-left:-35px;-webkit-animation:orb
7.1867343561s linear infinite;animation:orb 7.1867343561s linear infinite;}.mercury:before{height:4px;width:4px;background:#9f5e26;margin-top:-2px;margin-left:-2px;}.venus{height:100px;width:100px;margin-top:-50px;margin-left:-50px;-webkit-animation:orb
18.4555338265s linear infinite;animation:orb 18.4555338265s linear infinite;}.venus:before{height:8px;width:8px;background:#beb768;margin-top:-4px;margin-left:-4px;}.earth{height:145px;width:145px;margin-top:-72.5px;margin-left:-72.5px;-webkit-animation:orb
30s linear infinite;animation:orb 30s linear infinite;}.earth:before{height:6px;width:6px;background:#11abe9;margin-top:-3px;margin-left:-3px;}.earth:after{position:absolute;content:'';height:18px;width:18px;left:50%;top:0px;margin-left:-9px;margin-top:-9px;border-radius:100px;box-shadow:0
-10px 0 -8px grey;-webkit-animation:orb 2.2440352158s linear infinite;animation:orb
2.2440352158s linear infinite;}.mars{height:190px;width:190px;margin-top:-95px;margin-left:-95px;-webkit-animation:orb
56.4261314589s linear infinite;animation:orb 56.4261314589s linear infinite;}.mars:before{height:6px;width:6px;background:#cf3921;margin-top:-3px;margin-left:-3px;}.jupiter{height:340px;width:340px;margin-top:-170px;margin-left:-170px;-webkit-animation:orb
355.7228171013s linear infinite;animation:orb 355.7228171013s linear infinite;}.jupiter:before{height:18px;width:18px;background:#c76e2a;margin-top:-9px;margin-left:-9px;}.saturn{height:440px;width:440px;margin-top:-220px;margin-left:-220px;-webkit-animation:orb
882.6952471456s linear infinite;animation:orb 882.6952471456s linear infinite;}.saturn:before{height:12px;width:12px;background:#e7c194;margin-top:-6px;margin-left:-6px;}.saturn:after{position:absolute;content:'';height:2.34%;width:4.676%;left:50%;top:0px;transform:rotateZ(-52deg);margin-left:-2.3%;margin-top:-1.2%;border-radius:50%
50% 50% 50%;box-shadow:0 1px 0 1px #987641,3px 1px 0 #987641,-3px 1px 0
#987641;-webkit-animation:orb 882.6952471456s linear infinite;animation:orb
882.6952471456s linear infinite;animation-direction:reverse;transform-origin:52%
60%;}.uranus{height:520px;width:520px;margin-top:-260px;margin-left:-260px;-webkit-animation:orb
2512.4001967933s linear infinite;animation:orb 2512.4001967933s linear
infinite;}.uranus:before{height:10px;width:10px;background:#b5e3e3;margin-top:-5px;margin-left:-5px;}.neptune{height:630px;width:630px;margin-top:-315px;margin-left:-315px;-webkit-animation:orb
4911.7838624549s linear infinite;animation:orb 4911.7838624549s linear
infinite;}.neptune:before{height:10px;width:10px;background:#175e9e;margin-top:-5px;margin-left:-5px;}.asteroids-belt{opacity:0.7;border-color:transparent
!important;height:300px;width:300px;margin-top:-150px;margin-left:-150px;-webkit-animation:orb
179.9558282773s linear infinite;animation:orb 179.9558282773s linear infinite;overflow:hidden;}.asteroids-belt:before{top:50%;height:210px;width:210px;margin-left:-105px;margin-top:-105px;background:transparent;border-radius:140px
!important;}.pluto{height:780px;width:780px;margin-top:-450px;margin-left:-320px;-webkit-animation:orb
7439.7074054575s linear infinite;animation:orb 7439.7074054575s linear
infinite;}.pluto:before{height:3px;width:3px;background:#fff;margin-top:-1.5px;margin-left:-1.5px;}.hide{display:none;}.links{margin-top:5px
!important;font-size:1em !important;}@-webkit-keyframes orb{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}@keyframes
orb{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
</style>
</head>
<body>
<div class="solar-syst">
<div class="sun">
</div>
<div class="mercury">
</div>
<div class="venus">
</div>
<div class="earth">
</div>
<div class="mars">
</div>
<div class="jupiter">
</div>
<div class="saturn">
</div>
<div class="uranus">
</div>
<div class="neptune">
</div>
<div class="pluto">
</div>
<div class="asteroids-belt">
</div>
</div>
</body>