這個**上有個利用css3實現太陽系運動的例子。主要用到：css3 border-radius, transforms & animations 屬性實現
我在上面基礎上得到乙個簡化版本：只有水星和金星。
我先大致說下原理，然後再來分析**。
原理：說白了就是乙個先畫乙個靜態的星空圖，然後通過各層的差異旋轉實現系統圖的執行。
具體如下：定位ul到頁面中心位置。每個圓圈都是乙個li，利用border-radius實現。然後在這個點上設定乙個標籤span，當然也是利用圓角效果，實現乙個小圓。然後利用
tranform的keyframes（關鍵幀），利用旋轉來處理標籤span的圓周運動。最後利用animation-duration 來處理這個圓周運動的執行時間。這個例子裡天體執行最主要應用的就是控制項的無限
旋轉rotate（0-360deg）。可以不用一行js，就可以實現天體執行了。當然如果用js canvas實現的話也很簡單。
分析**：
-webkit-transition: all 0.2s ease-in; // 該控制項的所有屬性 規定完成過渡效果需要多少秒或毫秒 規定速度效果的速度曲線（規定以慢速開始的過渡效果）
@-webkit-keyframes orbit ; //通過 @keyframes 規則，建立複雜的動畫。設定開始--進行--結束 各個點控制項的位置，樣式等
-webkit-animation-duration : 5s ;// 規定完成過渡效果需要多少秒或毫秒。
對於初學者來說有個東西要注意：你看到好多**在同一控制項上操作同一樣式屬性，後面的屬性會覆蓋前面的屬性。
當然還要注意的是樣式的優先順序--控制項內建sytle 樣式》id樣式》class樣式
使用css3的動畫模擬太陽系恆星公轉
本文介紹使用css3的animation畫乙個太陽系恆星公轉的動畫，再加以改進，討論如何畫橢圓的執行軌跡。然後分析京東和人人網使用animation的實際案例，最後結合css3的clip path做一些比較特別的動畫。太陽系最終的效果圖如下 先用css畫出靜態的圖，然後再加動畫的屬性。整個工程完整的...
利用CSS模擬太陽系運轉
display flex 屬性規定元素應該生成的框的型別。justify content center align items center position relative 屬性指定乙個元素 靜態的，相對的，絕對或固定 的定位方法的型別。值 生成相對定位的元素，相對於其正常位置進行定位。path...
太陽系相關知識
太陽系是由受太陽引力約束的天體組成的系統，它的最大範圍約可延伸到1光年以外。太陽系的主要成員有 太陽 恆星 九大行星 包括地球 無數小行星 眾多衛星 包括月亮 還有彗星 流星體以及大量塵埃物質和稀 薄的氣態物質.在太陽系中，太陽的質量佔太陽系總質量的99.8 其它天體的總和不到有太陽的0.2 太陽是...