DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> HTML5模擬太陽系八大行星公轉
HTML5模擬太陽系八大行星公轉
編輯:HTML5教程     
查看效果: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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved