你的位置:首页 > 软件开发 > 网页设计 > html+ccs3太阳系行星运转动画

html+ccs3太阳系行星运转动画

发布时间:2016-06-08 08:00:28
做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转。效果静态图: 动画中包括:太阳及各行星,运行轨道,行星公转动画。先画好草图,设计好大小和位置,根据公转周期计算好动画执行的时间。 html的结构:一个class为solar ...

做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转。

效果静态图:

html+ccs3太阳系行星运转动画

 

动画中包括:太阳及各行星,运行轨道,行星公转动画。

先画好草图,设计好大小和位置,根据公转周期计算好动画执行的时间。

 

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>

原标题:html+ccs3太阳系行星运转动画

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。