做一个太阳系八大行星的运转动画，不包括行星的卫星，所有行星围绕太阳公转，行星采用纯色，暂时没有自转。
效果静态图：
动画中包括：太阳及各行星，运行轨道，行星公转动画。
先画好草图，设计好大小和位置，根据公转周期计算好动画执行的时间。
html的结构:
一个class为solarsys的div，作为太阳系容器元素，该div的position为relative。
行星轨道和行星都用div，position为absolute。
容器用relative和内部元素采用absolute的定位方式，比较简单的能实现效果，缺点就是大小是固定的。
|
<div class="solarsys">
<!--太阳-->
<div class='sun'></div>
<!--水星轨道-->
<div class='mercuryOrbit'></div>
<!--水星-->
<div class='mercury'></div>
<!--金星轨道-->
<div class='venusOrbit'></div>
<!--金星-->
<div class='venus'></div>
<!--地球轨道-->
<div class='earthOrbit'></div>
<!--地球-->
<div class='earth'></div>
<!--火星轨道-->
<div class='marsOrbit'></div>
<!--火星-->
<div class='mars'></div>
<!--木星轨道-->
<div class='jupiterOrbit'></div>
<!--木星-->
<div class='jupiter'></div>
<!--土星轨道-->
<div class='saturnOrbit'></div>
<!--土星-->
<div class='saturn'></div>
<!--天王星轨道-->
<div class='uranusOrbit'></div>
<!--天王星-->
<div class='uranus'></div>
<!--海王星轨道-->
<div class='neptuneOrbit'></div>
<!--海王星-->
<div class='neptune'></div>
</div>
|
