首页 > 编程 > HTML > 正文

html+css3太阳系行星运转动画效果的实现代码

2019-10-26 17:18:28
字体:
来源:转载
供稿:网友

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

效果静态图:

 

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

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

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>  
  • 发表评论 共有条评论
    用户名: 密码:
    验证码: 匿名发表