HTML5 CSS3 實現地球繞太陽公轉

使用的是正面視角，主要是用 html5 + css3 來實現，js只是用來畫圖。

test.html：

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
title
>地球-太陽自轉與公轉
title
>
<
link 
type
="text/css"
rel='stylesheet' 
href
="test.css"
>
link
>
head
>
<
body
>
<
div 
class
="box"
>
<
canvas 
id="sun"
width
="150px"
height
="150px"
>
canvas
>
<
canvas 
id="earth"
width
="50px"
height
="50px"
>
canvas
>
div>
<
script 
src="test.js"
>
script
>
body
>
html
>

test.css：

*.box#sun#earth@keyframes sunto}

@keyframes earthto}

.box加上乙個較大的 perspective 屬性，想象自己漂在太空中較遠處某個點觀察地球和太陽；不加 perspective 屬性相當於站在無窮遠處觀察。

test.js：

var sun = document.getelementbyid("sun").getcontext('2d'),

earth = document.getelementbyid('earth').getcontext('2d'),
gra1 = sun.createradialgradient(75,75,0,75,75,75),
gra2 = earth.createradialgradient(25,25,0,25,25,25);
gra1.addcolorstop(0,'#ffff00');
gra1.addcolorstop(1,'#ff9900');
sun.arc(75,75,75,0,2 *math.pi);
sun.fillstyle =gra1;
sun.fill();
gra2.addcolorstop(0,'#78b1e8');
gra2.addcolorstop(1,'#1c4364');
earth.arc(25,25,25,0,2 *math.pi);
earth.fillstyle =gra2;
earth.fill();

初學HTML5 CSS3動畫

乙個完整的css animations由兩部分構成 在css3中使用 keyframes規則來建立動畫，keyframes可以設定多個關鍵幀，每個關鍵幀表示動畫過程中的乙個狀態，多個關鍵幀就可以使動畫十分絢麗。keyframes animationname animation屬性用於描述動畫的css...

HTML5 CSS3實現新增鎖屏效果

鎖屏效果，也就是將螢幕置於模態，不允許使用者觸發任何動作，只能解除鎖定後才能繼續使用，jqueryui的dialog有模態對話方塊，這一點不難做到。那麼，首先需要在頁面中新增乙個div層，用於做模態的層 其對應的css比較簡單，主要設定一下z index屬性，值設定的很大即可，就能達到覆蓋其餘元素的...

HTML5 CSS3實現新增鎖屏效果

鎖屏效果，也就是將螢幕置於模態，不允許使用者觸發任何動作，只能解除鎖定後才能繼續使用，jqueryui的dialog有模態對話方塊，這一點不難做到。那麼，首先需要在頁面中新增乙個div層，用於做模態的層 html 其對應的css比較簡單，主要設定一下z index屬性，值設定的很大即可，就能達到覆蓋...