查看效果:http://hovertree.com/texiao/html5/9.htm
地球自傳效果
這個是CSS3實現的效果,這個更逼真:
http://hovertree.com/texiao/css3/31/
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML5模擬太陽系八大行星公轉 - 何問起</title>
<meta charset="utf-8" />
<style>body{margin:0px;background-color:black;color:white}.hvtholder{width:1000px;margin:2px auto;}a{color:greenyellow}</style>
</head>
<body><div class="hvtholder"><h3>HTML5模擬太陽系八大行星公轉</h3>
<a href="http://hovertree.com">首頁</a>
<a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/hvtart/bjae/ipblia78.htm">原文</a>
<a href="http://hovertree.com/texiao/css/8.htm">打火機</a>
<a href="http://hovertree.com/texiao/html5/8.htm">地球轉動</a>
<audio src="http://cms.hovertree.com/hovertreesound/hovertreejsys.mp3" autoplay="autoplay" controls="controls"><br />您的浏覽器不支持播放音樂。請用支持html5的浏覽器打開,例如chrome或火狐或者新版IE等。<br />何問起 hovertree.com<br /></audio>
<canvas id="canvashovertree" width="1000" height="1000" style="background-color: #000;">您的浏覽器不支canvas。請用支持html5的浏覽器打開,例如chrome或火狐或者新版IE等。何問起 hovertree.com</canvas>
</div>
<script src="http://hovertree.com/texiao/html5/9/sunhovertree.js"></script>
</body>
</html>
附:
八大行星特指太陽系的八個行星,按照離太陽的距離從近到遠,它們依次為水星、金星、地球、火星、木星、土星、天王星、海王星。八大行星自轉方向多數也和公轉方向一致。只有金星和天王星兩個例外。金星自轉方向與公轉方向相反。而天王星是在軌道上橫滾的。而曾經被認為是"九大行星"之一的冥王星於2006年8月24日被定義為"矮行星"。
行星的定義:一是必須圍繞恆星運轉的天體;二是質量足夠大,能依靠自身引力使天體呈圓球狀;三是其軌道附近應該沒有其他物體。按這樣的劃分,太陽系的行星就只有水、金、地、火、木、土,加上天王、海王星這八顆。 與2006年之前提到的九大行星概念不同,在在2006年8月24日於布拉格舉行的第26屆國際天文聯會中通過的第5號決議中,冥王星被劃為矮行星,從太陽系九大行星中被除名。必須是圍繞恆星運轉的天體--冥王星相符。質量足夠大,能依靠自身引力使天體呈圓球狀相符,但是冥王星沒有能夠清空其軌道上的其他物體,因此降級為矮行星。
而同樣具有足夠質量、成圓球形,但不能清除其軌道附近其他物體的天體稱為"矮行星",冥王星恰好符合這一定義,並被國際天文學聯合會確認是一顆"矮行星"。所以冥王星被歸為矮行星。從此太陽系只有八大行星。
星球 |
變量名 |
公轉周期 |
光色 |
暗色 |
水星
Mercury
87.70
#a69697
#5c3e40
金星
Venus
224.701.70
#c4bbac
#1f1315
地球
Earth
365.2422
#78b1e8
#050c12
火星
Mars
686.98
#cec9b6
#76422d
木星
Jupiter
4332.589
#c0a48e
#322
土星
Saturn
10759.95
#f7f9e3
#5c4553
天王星
Uranus
30799.095
#a7e115
#19243a
海王星
Neptune
60152.95
#0661b2
#1E3b73