CSS动态模拟太阳系八大行星的运行（简单版和3D复杂版）

简单版效果图：

背景为八大行星和太阳系的相关数据。

背景和太阳都可以实现单击隐藏、双击显示。

行星的大小和轨道只是粗略地表示了相关关系，但运行的周期（即公转的速度是严格按照其公转周期按比较设置的。（1 month / 3 second）

复杂精确版：

复杂精确版代码：

https://github.com/wwuhn/Html-CSS-JS/blob/solarSys/solarSystem3D

以下是简单版代码：

（CSS代码稍有冗余，一些选择器的相同代码可以写到一起。）

（按钮控制隐藏、显示的是简单的几行jQuery代码。）

<!DOCTYPE html><html><head><meta charset='gb2312'><meta name='author' content='http://www.softwhy.com/' /><title>solar system</title><script src='http://code.jquery.com/jquery-latest.min.js'></script><script>$(document).ready(function(){ $('#hide1').click(function(){$('#tbrowser').hide()}); $('#hide1').dblclick(function(){$('#tbrowser').show();}); $('#hide2').click(function(){$('#solar').hide()}); $('#hide2').dblclick(function(){$('#solar').show();});});</script><style>.container{ margin:auto; width:75.29%; clear:both;}#tbrowser { width:100%; margin:auto; border-collapse:collapse;font-family:'宋体'; text-align:left; line-height:1.3em; ;}#tbrowser a:link，.container a:visited{font-size:18px;text-decoration:none;}#tbrowser th,#tbrowser td{ border:1px solid #111; color:#333; text-align:left; font-family: '宋体'; padding-left:3px; text-align:center; background-color:black;}*{ margin: 0; padding: 0;}body{ background-color: #000;}div{ border-radius: 50%;}.sun{ position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); width: 70px; /*sun's size*/ height: 70px; background-color: #ffd700; border-radius: 50%; box-shadow: 0 0 20px 1px #ffd700; text-align:center; vertical-align:middle;}/*水星*/.Mercury{ position: absolute; width: 120px; height: 120px; border: 1px dotted #444; transform: translate(-50%,-50%); left: 50%; top: 50%; animation: autoPlay 8.797s linear infinite ;}.Mercury::before{ content: ''; position: absolute; width: 12px; height: 12px; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: #f0e68c; box-shadow:0px 0px 10px 1px #f0e68c;}/*金星*/.vnues{ position: absolute; width: 180px; height: 180px; border: 1px dotted #444; transform: translate(-50%,-50%); left: 50%; top: 50%; animation: autoPlay 22.470s linear infinite ;}.vnues::before{ content: ''; position: absolute; width: 28px; height: 28px; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: yellow; box-shadow:0px 0px 10px 1px yellow;}/*地球*/.earth{ position: absolute; width: 275px; /*size of earth's path*/ height: 275px; border: 1px dotted #444; transform: translate(-50%,-50%); left: 50%; top: 50%; animation: autoPlay 36.526s linear infinite ;}.earth::before{ content: ''; position: absolute; width: 30px; /*earth's size*/ height: 30px; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: deepskyblue; box-shadow:0px 0px 10px 1px blue ;}/*月球*/.moon{ position: absolute; width: 50px; height: 50px; transform: translate(-50%,-50%); top: 50%; animation: autoPlay 3s linear infinite ;}.moon::before{ content: ''; position: absolute; width: 10px; height: 10px; top: 50%; border-radius: 50%; transform: translate(-50%,-50%); background-color: #fff; box-shadow:0px 0px 10px 1px #fff ;}/*火星*/.Mars{ position: absolute; width: 400px; /*size of earth's path*/ height: 400px; border: 1px dotted #444; transform: translate(-50%,-50%); left: 50%; top: 50%; animation: autoPlay 68.698s linear infinite ;}.Mars::before{ content: ''; position: absolute; width: 16px; /*earth's size*/ height: 16px; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: red; box-shadow:0px 0px 10px 1px red ;}/*木星*/.Jupiter{ position: absolute; width: 550px; /*size of earth's path*/ height: 550px; border: 1px dotted #444; transform: translate(-50%,-50%); left: 50%; top: 50%; animation: autoPlay 432.89s linear infinite ;}.Jupiter::before{ content: ''; position: absolute; width: 50px; /*earth's size*/ height: 50px; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: #f5deb3; box-shadow:0px 0px 10px 1px #f5deb3 ;}/*土星*/.Saturn{ position: absolute; width: 670px; /*size of earth's path*/ height: 670px; border: 1px dotted #444; transform: translate(-50%,-50%); left: 50%; top: 50%; animation: autoPlay 1075.29s linear infinite ;}.Saturn::before{ content: ''; position: absolute; width: 48px; /*earth's size*/ height: 48px; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: #bdb76b; box-shadow:0px 0px 10px 1px #bdb76 ;}/*天王星*/.Uranus{ position: absolute; width: 850px; /*size of earth's path*/ height: 850px; border: 1px dotted #444; transform: translate(-50%,-50%); left: 50%; top: 50%; animation: autoPlay 3066.365s linear infinite ;}.Uranus::before{ content: ''; position: absolute; width: 16px; /*earth's size*/ height: 16px; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: darkslateblue; box-shadow:0px 0px 10px 1px darkslateblue ;}/*海王星*/.Neptune{ position: absolute; width: 1000px; /*size of earth's path*/ height: 1000px; border: 1px dotted #444; transform: translate(-50%,-50%); left: 50%; top: 50%; animation: autoPlay 6014.835s linear infinite ;}.Neptune::before{ content: ''; position: absolute; width: 15px; /*earth's size*/ height: 15px; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background-color: blue; box-shadow:0px 0px 10px 1px blue ;}@keyframes autoPlay { 0%{ transform: translate(-50%,-50%) rotate(180deg) ; } 100%{ transform: translate(-50%,-50%) rotate(-180deg) ; }}a:link,a:visited{color:#666;text-decoration:none;}</style><meta http-equiv='Content-Type' content='text/html; charset=gb2312'></head><body style='overflow-y: hidden; overflow:hidden'><div style='position:absolute; color:#555; text-align:right; width:100%;'><p>公转速度模拟:</p><p>1 month / 3 second</p><p> <a href = 'javascript:void' title='单击隐藏数据，双击显示数据' id='hide1'>隐藏或显示数据</a></p><p> <a href = 'javascript:void' title='单击隐藏太阳系，双击显示太阳系' id='hide2'>隐藏或显示太阳系</a></p><p>水漫金山地，火烧木焦土；<p>天海成一体，浩浩太阳系。</p></div><div id = 'solar'><div class='sun'><p style='margin-top:30%;'><p style='color:#990000;'>sun<p></div><div class='Mercury'><p style='color:white; vertical-align:middle; text-align:left; margin-left:-5px; margin-top:28%;'>水</p></div><div class='vnues'><p style='color:white; vertical-align:middle; text-align:left; margin-left:-5px; margin-top:30%;'>金</p></div><div class='earth'><div class='moon'></div></div><div class='Mars'><p style='color:white; vertical-align:middle; text-align:left; margin-left:-6px; margin-top:42%;'>火</p></div><div class='Jupiter'><p style='color:white; vertical-align:middle; text-align:left; margin-left:-5px; margin-top:41%;'>木</p></div><div class='Saturn'><p style='color:white; vertical-align:middle; text-align:left; margin-left:-5px; margin-top:43%;'>土</p></div><div class='Uranus'><p style='color:white; vertical-align:middle; text-align:left; margin-left:-7px; margin-top:46.5%;'>天</p></div><div class='Neptune'><p style='color:white; vertical-align:middle; text-align:left; margin-left:-8px; margin-top:47%;'>海</p></div></div><div class='container' style='color:#666666;'><table id='tbrowser'><col width='3%' /><col width='7%' /><col width='10%' /><col width='13%' /><col width='10%' /><col width='8%' /><col width='10%' /><col width='10%' /><col width='10%' /><col width='8%' /><col width='7%' /> <tr> <th>序</th> <th>名称</th> <th>英文名</th> <th>直径<br />(公里)</th> <th class='fsize80'>日距<br />(亿千米)</th> <th class='fsize70'>日距<br />(天文单位)</th> <th>质量<br />(Ｍ地)</th> <th>体积<br />(Ｖ地)</th> <th>平均密度<br />g/cm^3</th> <th class='fsize80'>运行速率<br />(公里/秒)</th> <th class='fsize80'>others</th> </tr> <tr> <td>0</td> <td>太阳</td> <td>Sun</td> <td>1,392,530</td> <td> </td> <td> </td> <td>332,948</td> <td>1,303,536</td> <td>1.409</td> <td> </td> <td> </td> </tr> <tr> <td>1</td> <td>水星</td> <td>Mercury</td> <td>4878</td> <td>0.5791</td> <td>0.39</td> <td>0.06</td> <td>0.06</td> <td>5.43</td> <td>47.89</td> <td> </td> </tr> <tr> <td>2</td> <td>金星</td> <td>Venus</td> <td>12103</td> <td>1.0820</td> <td>0.72</td> <td>0.81</td> <td>0.86</td> <td>5.24</td> <td>35.03</td> <td> </td> </tr> <tr> <td>3</td> <td>地球</td> <td>Earth</td> <td>12756</td> <td>1.4960</td> <td>1.00</td> <td>1.00</td> <td>1.00</td> <td>5.52</td> <td>29.79</td> <td> </td> </tr> <tr> <td>4</td> <td>火星</td> <td>Mars</td> <td>6786</td> <td>2.2794</td> <td>1.52</td> <td>0.11</td> <td>0.15</td> <td>3.95</td> <td>24.13</td> <td> </td> </tr> <tr> <td>5</td> <td>木星</td> <td>Jupiter</td> <td>142984</td> <td>7.7833</td> <td>5.20</td> <td>318.00</td> <td>1319.00</td> <td>1.33</td> <td>13.06</td> <td> </td> </tr> <tr> <td>6</td> <td>土星</td> <td>Saturn</td> <td>120536</td> <td>14.2698</td> <td>9.54</td> <td>95.18</td> <td>744.00</td> <td>0.69</td> <td>9.64</td> <td> </td> </tr> <tr> <td>7</td> <td>天王星</td> <td>Uranus</td> <td>51118</td> <td>28.7099</td> <td>19.18</td> <td>14.50</td> <td>67.00</td> <td>1.29</td> <td>6.81</td> <td> </td> </tr> <tr> <td>8</td> <td>海王星</td> <td>Neptune</td> <td>49528</td> <td>45.0430</td> <td>30.06</td> <td>17.14</td> <td>57.00</td> <td>1.64</td> <td>5.43</td> <td> </td> </tr> <tr> <td> </td> <td>月球</td> <td>Moon</td> <td>3476．4</td> <td> </td> <td> </td> <td>1/81</td> <td> </td> <td>3．34</td> <td> </td> <td> </td> </tr> <tr> <th>序</th> <th>名称</th> <th>公转周期</th> <th>自转方向</th> <th>自转周期</th> <th class='fsize80'></th> <th>反射率</th> <th>卫星数<br />(已确认)</th><th class='fsize80'>表面重力<br />(g地) <th colspan='2'>表面温度<br />(摄氏)</th> </th> </tr> <tr> <td>1</td> <td>水星</td> <td>87.97天</td> <td>自西向东</td> <td>58.65天</td> <td></td> <td>0.11</td> <td>0</td> <td>0.38</td> <td colspan='2'>－180～＋430 ℃</td> </tr> <tr> <td>2</td> <td>金星</td> <td>224.70天</td> <td>自东向西</td> <td>243天</td> <td>0.90</td> <td></td> <td>0</td> <td>0.90</td> <td colspan='2'>＋465～＋500 ℃</td> </tr> <tr> <td>3</td> <td>地球</td> <td>365.26天</td> <td>自西向东</td> <td>23时56分</td> <td></td> <td>0.37</td> <td>1</td><td>1.00</td> <td colspan='2'>－ 89～＋ 58 ℃</td> </tr> <tr> <td>4</td> <td>火星</td> <td>686.98天</td> <td>自西向东</td> <td>24时37分</td> <td></td> <td>0.15</td> <td>2</td><td>0.38</td> <td colspan='2'>－133～＋ 27 ℃</td> </tr> <tr> <td>5</td> <td>木星</td> <td>11.86年</td> <td>自西向东</td> <td>9时50分</td> <td></td> <td>0.52</td> <td>16</td><td>2.64</td> <td colspan='2'>－150～－140 ℃</td> </tr> <tr> <td>6</td> <td>土星</td> <td>29.46年</td> <td>自西向东</td> <td>10时39分</td> <td></td> <td>0.47</td> <td>23</td><td>0.93</td> <td colspan='2'>－180～－125 ℃</td> </tr> <tr> <td>7</td> <td>天王星</td> <td>84.01年</td> <td>自东向西</td> <td>17时14分</td> <td></td> <td>0.51</td> <td>21</td><td>0.79</td> <td colspan='2'>－224～－216 ℃</td> </tr> <tr> <td>8</td> <td>海王星</td> <td>164.79年</td> <td>自西向东</td> <td>16时7分</td> <td></td> <td>0.41</td> <td>27</td><td>1.12</td> <td colspan='2'>－218～－190 ℃</td> </tr> <tr> <th>序</th> <th>名称</th> <th style='font-size:15px;'>轨道倾斜角<br />(度)</th> <th>轨道<br />离心率</th> <th style='font-size:15px;'>自转轴<br />倾斜角(度)</th> <th style='font-size:15px;'>逃逸速度<br />km/s</th> <th style='font-size:15px;'>重力加速度<br />(m/s2)</th> <th>表层温度<br />(平均)</th> <th>近日点<br />距离</th> <th>远日点<br />距离</th> <th> </th> </tr> <tr> <td> </td> <td>太阳</td> <td align='right'> </td> <td align='right'> </td> <td align='right'> </td> <td align='right'>618</td> <td align='right'> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>1</td> <td>水星</td> <td align='right'>7.0048</td> <td align='right'>0.2056</td> <td align='right'>0.00</td> <td align='right'>4.44</td> <td align='right'>3.701</td> <td>179℃</td> <td>0.3075</td> <td>0.4612</td> <td> </td> </tr> <tr> <td>2</td> <td>金星</td> <td align='right'>3.9347</td> <td align='right'>0.0068</td> <td align='right'>177.33</td> <td align='right'>10.40</td> <td align='right'>8.78</td> <td>480℃</td> <td>0.7205</td> <td>0.7255</td> <td> </td> </tr> <tr> <td>3</td> <td>地球</td> <td align='right'>0.0000</td> <td align='right'>0.0167</td> <td align='right'>23.45</td> <td align='right'>11.20</td> <td align='right'>9.78</td> <td>15℃</td> <td>0.9833</td> <td>1.0167</td> <td> </td> </tr> <tr> <td>4</td> <td>火星</td> <td align='right'>1.8506</td> <td align='right'>0.9341</td> <td align='right'>25.19</td> <td align='right'>5.02</td> <td align='right'>3.72</td> <td>-55℃</td> <td>——</td> <td>——</td> <td> </td> </tr> <tr> <td>5</td> <td>木星</td> <td align='right'>1.3053</td> <td align='right'>0.0489</td> <td align='right'>3.08</td> <td align='right'>60.20</td> <td align='right'>23.12</td> <td>-140℃</td> <td>——</td> <td>——</td> <td> </td> </tr> <tr> <td>6</td> <td>土星</td> <td align='right'>2.4845</td> <td align='right'>0.0542</td> <td align='right'>26.73</td> <td align='right'>35.60</td> <td align='right'>10.17</td> <td>-140℃</td> <td>——</td> <td>——</td> <td> </td> </tr> <tr> <td>7</td> <td>天王星</td> <td align='right'>0.7699</td> <td align='right'>0.0472</td> <td align='right'>97.92</td> <td align='right'>21.30</td> <td align='right'>8.69</td> <td>-220℃</td> <td>18.3755</td> <td>20.0833</td> <td> </td> </tr> <tr> <td>8</td> <td>海王星</td> <td align='right'>1.7692</td> <td align='right'>0.0859</td> <td align='right'>28.80</td> <td align='right'>23.60</td> <td align='right'>11.00</td> <td>-214℃</td> <td>——</td> <td>——</td> <td> </td> </tr> <tr> <td> </td> <td>月球</td> <td align='right'> </td> <td align='right'> </td> <td align='right'> </td> <td align='right'>2．38</td> <td align='right'>1．62</td> <td> </td> <td>363300公里</td> <td>405500公里</td> <td> </td> </tr> <tr> <th>序</th> <th>名称</th> <th style='font-size:15px;'>太阳辐射量<br />(Ｅ地)</th> <th>反射率／<br />最大光度</th> <th>表面积<br />(万km^2)</th> <th>发现年份</th> <th colspan='5'>主要大气成分</th> </tr> <tr> <td> </td> <td>太阳</td> <td> </td> <td> </td> <td> </td> <td> </td> <td colspan='5'>氢（71％）、氮（27％），氧、碳、氮、氖；硅、铁等</td> </tr> <tr> <td>1</td> <td>水星</td> <td>6.674</td> <td>10.6%/-1.9</td> <td>4.60亿</td> <td>5000年前</td> <td colspan='5'>氦42％、钠42％、氧15％</td> </tr> <tr> <td>2</td> <td>金星</td> <td>1.911</td> <td>65.0%/-4.4</td> <td>——</td> <td>——</td> <td colspan='5'>二氧化碳97％、氮/氧3％</td> </tr> <tr> <td>3</td> <td>地球</td> <td>1.000</td> <td>37.0%/——</td> <td>5.10亿</td> <td>——</td> <td colspan='5'>氮78.1％、氧20.9％、氩0.9％</td> </tr> <tr> <td>4</td> <td>火星</td> <td>0.431</td> <td>15.0%/-2.0</td> <td>1.43亿</td> <td>——</td> <td colspan='5'>二氧化碳95.3％、氮2.7％、氩1.6%</td> </tr> <tr> <td>5</td> <td>木星</td> <td>0.037</td> <td>52.0%/-2.7</td> <td>——</td> <td>——</td> <td colspan='5'>氢90％、氦10％</td> </tr> <tr> <td>6</td> <td>土星</td> <td>0.011</td> <td>?47.0%/0.67</td> <td>——</td> <td>公元前</td> <td colspan='5'>氢、氦</td> </tr> <tr> <td>7</td> <td>天王星</td> <td>0.003</td> <td>?51.0%/5.52</td> <td>?81.16亿</td> <td>1781年</td> <td colspan='5'>氢83±3％、氦15±3％、甲烷2.3％</td> </tr> <tr> <td>8</td> <td>海王星</td> <td>0.001</td> <td>41.0%/7.84</td> <td>——</td> <td>1846年</td> <td colspan='5'>氢85%、氦13%、甲烷2%</td> </tr> <tfoot> <tr> <td colspan='11' rowspan='2'>备注：地球质量Ｍ地＝5.9742×10^24(千克)；地球体积Ｖ地＝1.0832073×10^12(立方千米)；１天文单位＝1.4960亿公里</td> </tr> <tr> </tr> <tr> <td colspan='11'></td> </tr></tfoot></table></div></body></html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。