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

—-想了解html+css3太阳系行星运转动画效果的实现代码分享 的全部内容且更多的html语言教程关注<计算机技术网(www.ctvol.com)!!>

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

效果静态图：

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

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

html的结构:

一个class为solarsys的div，作为太阳系容器元素，该div的position为relative。

行星轨道和行星都用div，position为absolute。

容器用relative和内部元素采用absolute的定位方式，比较简单的能实现效果，缺点就是大小是固定的。

XML/HTML Code复制内容到剪贴板

1. <div class="solarsys">  
2.         <!–太阳–>  
3.         <div class=‘sun’></div>  
4.   
5.         <!–水星轨道–>  
6.         <div class=‘mercuryOrbit’></div>  
7.   
8.         <!–水星–>  
9.         <div class=‘mercury’></div>  
10.   
11.         <!–金星轨道–>  
12.         <div class=‘venusOrbit’></div>  
13.   
14.         <!–金星–>  
15.         <div class=‘venus’></div>  
16.   
17.         <!–地球轨道–>  
18.         <div class=‘earthOrbit’></div>  
19.   
20.         <!–地球–>  
21.         <div class=‘earth’></div>  
22.   
23.         <!–火星轨道–>  
24.         <div class=‘marsOrbit’></div>  
25.   
26.         <!–火星–>  
27.         <div class=‘mars’></div>  
28.   
29.         <!–木星轨道–>  
30.         <div class=‘jupiterOrbit’></div>  
31.   
32.         <!–木星–>  
33.         <div class=‘jupiter’></div>  
34.   
35.         <!–土星轨道–>  
36.         <div class=‘saturnOrbit’></div>  
37.   
38.         <!–土星–>  
39.         <div class=‘saturn’></div>  
40.   
41.         <!–天王星轨道–>  
42.         <div class=‘uranusOrbit’></div>  
43.   
44.         <!–天王星–>  
45.         <div class=‘uranus’></div>  
46.   
47.         <!–海王星轨道–>  
48.         <div class=‘neptuneOrbit’></div>  
49.   
50.         <!–海王星–>  
51.         <div class=‘neptune’></div>  
52.     </div>  

太阳系容器div的css：

• 1
• 2
• 3
• 4
• 5
• 下一页