本文介紹使用css3的animation畫乙個太陽系恆星公轉的動畫，再加以改進，討論如何畫橢圓的執行軌跡。然後分析京東和人人網使用animation的實際案例，最後結合css3的clip-path做一些比較特別的動畫。
太陽系最終的效果圖如下：
先用css畫出靜態的圖，然後再加動畫的屬性。整個工程完整的**見這個demo。html如下：
在輪子wheel加乙個動畫的屬性，
.wheel
@keyframes move然後再給輪子新增乙個滾動的效果rotate，用執行的距離除以輪子的周長得出需要滾動多少圈，即375 / (25 * 3.1415926 * 2) * 360 = 859.4度，也就是在這個區間向右移動的同時加上自轉的效果，所以給transform新增多乙個rotate的屬性。}
transform: translatex(350px) rotate(859.4deg);這樣就可以了：
這就是css3的animation動畫，結合transform的大小、旋轉、位移、斜切，通過兩三行**，便可做出很多有趣的效果。
接下來討論太陽系的製作，跟上面不同的地方是行星是圍繞著太陽轉的，而輪子是圍繞著自己的圓心轉的，也就是說他們轉的基點不同。可以看出，transform的基點預設是本身的中心center，所以我們要改變行星的進行轉換的中心點transform-origin。完整的demo。太陽系的html結構如下：
太陽位於div galaxy的中間，讓其它行星位於太陽的右邊排成一條線。設定galaxy的width和height都為1300px。sun的大小為100px*100px，所以sun的left值和top值都為(1300 - 100) / 2 = 600px，這樣sun就位於中間位置。設定水星mercury的left值為700px，top為625px，這樣水星就位於太陽偏右的位置。然後再設定transform-origin:
transform-origin: -50px 25px;transform-origin的原點是作用的元素左上角位置，所以往左移（700 - 1300 / 2) = 50px，往下移60 / 2 = 30px(60為水星高度)，水星轉換的基點就變成了太陽的中心，在此基礎上進行旋**
animation: rotation 2.4s linear infinite;注意這裡改變了同義的屬性，0%和100%分別換成from和to，360deg換成1turn。@keyframes rotation
}
其它的行星，也按照這種方法進行設定，計算稍微繁瑣。公轉的週期以地球10s為基準，其它按比例換算。這樣就可以做出乙個太陽系公轉的圖，原理很簡單，效果卻很好。
注意到行星執行的軌跡其實是橢圓形的，上面是用了正圓形。因此，下面討論如何做乙個橢圓的執行軌跡。檢視完整的demo。效果圖如下：
上面的橢圓在y軸上被壓扁了，可以考慮在y軸上新增乙個位移變換，原理如下圖所示，首先將地球的初始位置放到橢圓和其短軸的交點處，然後transform-origin設定為半徑為800px的圓心的位置，但執行時間為50%即到初始位置對面的時候，插入乙個關鍵幀：做乙個位移轉換，向y軸負方向移動200px，這樣就可以形成乙個半橢圓的軌跡，到了100%的時候逐漸恢復為初始值0，跟前面的半橢圓相反，就可以完成乙個完整的橢圓軌跡。
需要在earth的外麵包一層div，用來設定translatey的效果，因為這個效果的時間曲線需要設定為ease-in-out漸進漸出的效果，讓橢圓執行起來更加的順暢，如果不設定的話渲染出來的動畫會不太像橢圓軌跡。html的結構如下：
給movey新增乙個translatey的動畫，其它的一樣。
.movey注意這裡將movey的週期設定為旋轉的一半，同時使用了乙個transition-direction為alternate的屬性，alternate意為交替，效果等同於@keyframes movey
}
@keyframes movey（未完待續。。。）50%}
css3 我們太陽系
這個 上有個利用css3實現太陽系運動的例子。主要用到 css3 border radius,transforms animations 屬性實現 我在上面基礎上得到乙個簡化版本 只有水星和金星。我先大致說下原理，然後再來分析 原理 說白了就是乙個先畫乙個靜態的星空圖，然後通過各層的差異旋轉實現系統...
利用CSS模擬太陽系運轉
display flex 屬性規定元素應該生成的框的型別。justify content center align items center position relative 屬性指定乙個元素 靜態的，相對的，絕對或固定 的定位方法的型別。值 生成相對定位的元素，相對於其正常位置進行定位。path...
html ccs3太陽系行星運轉動畫
做乙個太陽系八大行星的運轉動畫，不包括行星的衛星，所有行星圍繞太陽公轉，行星採用純色，暫時沒有自轉。效果靜態圖 動畫中包括 太陽及各行星，執行軌道，行星公轉動畫。先畫好草圖，設計好大小和位置，根據公轉週期計算好動畫執行的時間。html的結構 乙個class為solarsys的div，作為太陽系容器元...