html+css3太阳系行星运转动画效果的实现代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
html+css3太阳系⾏星运转动画效果的实现代码做⼀个太阳系⼋⼤⾏星的运转动画，不包括⾏星的卫星，所有⾏星围绕太阳公转，⾏星采⽤纯⾊，暂时没有⾃转。
效果静态图：
动画中包括：太阳及各⾏星，运⾏轨道，⾏星公转动画。
先画好草图，设计好⼤⼩和位置，根据公转周期计算好动画执⾏的时间。
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. <!--⾦星-->
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：
定宽，定⾼，relative定位，页⾯内剧中对齐。
CSS Code复制内容到剪贴板
1. .solarsys{
2. width: 800px;
3. height: 800px;;
4. position: relative;
5. margin: 0 auto;
6. background-color: #000000;
7. padding: 0;
8. transform: scale(1);
9. }
太阳div的css：
按照设计的⼤⼩和位置，设定宽⾼，left，top。
设定颜⾊。
通过把boder-radius⽣成50%，把⼀个正⽅形变成圆形。
通过box-shadow的4层颜⾊设置实现太阳光晕。
3. top:357px;
4. height: 90px;
5. width: 90px;
6. background-color: rgb(248,107,35);
7. border-radius: 50%;
8. box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -
5px 5px 10px rgb(248,107,35);
9. position: absolute;
10. margin: 0;
11. }
⾏星轨道div的css：
假设是⽔星轨道。
按照设计的⼤⼩和位置，设定宽⾼，left，top。
背景⾊透明。
通过把boder-radius⽣成50%，把⼀个正⽅形变成圆形。
boder的类型设成虚线。
boder的颜⾊设成灰⾊。
宽度设1。
CSS Code复制内容到剪贴板
1. .mercuryOrbit {
2. left:342.5px;
3. top:342.5px;
4. height: 115px;
5. width: 115px;
6. background-color: transparent;
7. border-radius: 50%;
8. border-style: dashed;
9. border-color: gray;
10. position: absolute;
11. border-width: 1px;
12. margin: 0px;
13. padding: 0px;
14. }
⾏星div的css：
假设是⽔星。
按照设计的⼤⼩和位置，设定宽⾼，left，top。
设置颜⾊。
通过把boder-radius⽣成50%，把⼀个正⽅形变成圆形。
将transfrom-origin设定成当前div的左上⾓相对于整个太阳系容器的中⼼点的横向和纵向的偏移量。
加上旋转动画后就是围绕着中⼼点旋转效果。
做⼀个animation，引⽤rotate关键帧动画，线性永久执⾏，这⾥的执⾏时长是根据⾏星的公转周期计算出来。
CSS Code复制内容到剪贴板
1. .mercury {
6. background-color: rgb(166,138,56);
7. border-radius: 50%;
8. position: absolute;
9. transform-origin: 62.5px 5px;
10. animation: rotate 1.5s infinite linear;
11. }
rotate关键帧动画：
逆时针旋转。
CSS Code复制内容到剪贴板
1. @keyframes rotate {
2. 100% {
3. transform: rotate(-360deg);
4. }
5. }
基本结构完成。
仅在chrome中测试过。
全部代码：
XML/HTML Code复制内容到剪贴板
1. <html>
2. <head>
3. <style>
4. .solarsys{
5. width: 800px;
6. height: 800px;;
7. position: relative;
8. margin: 0 auto;
9. background-color: #000000;
10. padding: 0;
11. transform: scale(1);
12. }
13.
14. /*太阳*/
15. .sun {
16. left:357px;
17. top:357px;
18. height: 90px;
19. width: 90px;
20. background-color: rgb(248,107,35);
21. border-radius: 50%;
22. box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -
5px 5px 10px rgb(248,107,35);
23. position: absolute;
24. margin: 0;
25. }
26.
27. /*⽔星*/
28. .mercury {
29. left:337.5px;
30. top:395px;
35. position: absolute;
36. transform-origin: 62.5px 5px;
37. animation: rotate 1.5s infinite linear;
38. }
39.
40. /*⽔星轨道*/
41. .mercuryOrbit {
42. left:342.5px;
43. top:342.5px;
44. height: 115px;
45. width: 115px;
46. background-color: transparent;
47. border-radius: 50%;
48. border-style: dashed;
49. border-color: gray;
50. position: absolute;
51. border-width: 1px;
52. margin: 0px;
53. padding: 0px;
54. }
55.
56. /*⾦星*/
57. .venus {
58. left:309px;
59. top:389px;
60. height: 22px;
61. width: 22px;
62. background-color: rgb(246,157,97);
63. border-radius: 50%;
64. position: absolute;
65. transform-origin: 91px 11px;
66. animation: rotate 3.84s infinite linear;
67. }
68.
69. /*⾦星轨道*/
70. .venusOrbit {
71. left:320px;
72. top:320px;
73. height: 160px;
74. width: 160px;
75. background-color: transparent;
76. border-radius: 50%;
77. border-style: dashed;
78. border-color: gray;
79. position: absolute;
80. border-width: 1px;
81. /*margin: 100px;*/
82. /*transform-origin: -75px -75px;*/
83. /*animation: rotate 4s infinite linear;*/
84. margin: 0px;
85. padding: 0px;
86. }
87.
88. /*地球*/
89. .earth {
90. left:266.5px;
91. top:391px;
97. transform-origin: 134px 9px;
98. animation: rotate 6.25s infinite linear;
99. }
100.
101. /*地球轨道*/
102. .earthOrbit {
103. left:275px;
104. top:275px;
105. height: 250px;
106. width: 250px;
107. background-color: transparent; 108. border-radius: 50%;
109. border-style: dashed;
110. border-color: gray;
111. position: absolute;
112. border-width: 1px;
113. /*margin: 100px;*/
114. /*transform-origin: -75px -75px;*/ 115. /*animation: rotate 4s infinite linear;*/ 116. margin: 0px;
117. padding: 0px;
118. }
119.
120. /*⽕星*/
121. .mars {
122. left:222.5px;
123. top:392.5px;
124. height: 15px;
125. width: 15px;
126. background-color: rgb(140,119,63); 127. border-radius: 50%;
128. position: absolute;
129. transform-origin: 177.5px 7.5px; 130. animation: rotate 11.75s infinite linear; 131. }
132.
133. /*⽕星轨道*/
134. .marsOrbit {
135. left:230px;
136. top:230px;
137. height: 340px;
138. width: 340px;
139. background-color: transparent; 140. border-radius: 50%;
141. border-style: dashed;
142. border-color: gray;
143. position: absolute;
144. border-width: 1px;
145. /*margin: 100px;*/
146. /*transform-origin: -75px -75px;*/ 147. /*animation: rotate 4s infinite linear;*/ 148. margin: 0px;
149. padding: 0px;
150. }
151.
152. /*⽊星*/
153. .jupiter {
158. background-color: rgb(156,164,143); 159. border-radius: 50%;
160. position: absolute;
161. transform-origin: 266px 21px;
162. animation: rotate 74.04s infinite linear; 163. }
164.
165. /*⽊星轨道*/
166. .jupiterOrbit {
167. left:155px;
168. top:155px;
169. height: 490px;
170. width: 490px;
171. background-color: transparent;
172. border-radius: 50%;
173. border-style: dashed;
174. border-color: gray;
175. position: absolute;
176. border-width: 1px;
177. /*margin: 100px;*/
178. /*transform-origin: -75px -75px;*/ 179. /*animation: rotate 4s infinite linear;*/ 180. margin: 0px;
181. padding: 0px;
182. }
183.
184. /*⼟星*/
185. .saturn {
186. left:92px;
187. top:387px;
188. height: 26px;
189. width: 26px;
190. background-color: rgb(215,171,68); 191. border-radius: 50%;
192. position: absolute;
193. transform-origin: 308px 13px;
194. animation: rotate 183.92s infinite linear; 195. }
196.
197. /*⼟星轨道*/
198. .saturnOrbit {
199. left:105px;
200. top:105px;
201. height: 590px;
202. width: 590px;
203. background-color: transparent;
204. border-radius: 50%;
205. border-style: dashed;
206. border-color: gray;
207. position: absolute;
208. border-width: 1px;
209. /*margin: 100px;*/
210. /*transform-origin: -75px -75px;*/ 211. /*animation: rotate 4s infinite linear;*/ 212. margin: 0px;
213. padding: 0px;
214. }
215.
220. height: 27px;
221. width: 27px;
222. background-color: rgb(164,192,206); 223. border-radius: 50%;
224. position: absolute;
225. transform-origin: 358.5px 13.5px; 226. animation: rotate 524.46s infinite linear; 227. }
228.
229. /*天王星轨道*/
230. .uranusOrbit {
231. left:55px;
232. top:55px;
233. height: 690px;
234. width: 690px;
235. background-color: transparent;
236. border-radius: 50%;
237. border-style: dashed;
238. border-color: gray;
239. position: absolute;
240. border-width: 1px;
241. /*margin: 100px;*/
242. /*transform-origin: -75px -75px;*/
243. /*animation: rotate 4s infinite linear;*/ 244. margin: 0px;
245. padding: 0px;
246. }
247.
248. /*海王星*/
249. .neptune {
250. left:10px;
251. top:390px;
252. height: 20px;
253. width: 20px;
254. background-color: rgb(133,136,180); 255. border-radius: 50%;
256. position: absolute;
257. transform-origin: 390px 10px;
258. animation: rotate 1028.76s infinite linear; 259. }
260.
261. /*海王星轨道*/
262. .neptuneOrbit {
263. left:20px;
264. top:20px;
265. height: 760px;
266. width: 760px;
267. background-color: transparent;
268. border-radius: 50%;
269. border-style: dashed;
270. border-color: gray;
271. position: absolute;
272. border-width: 1px;
273. /*margin: 100px;*/
274. /*transform-origin: -75px -75px;*/
275. /*animation: rotate 4s infinite linear;*/ 276. margin: 0px;
277. padding: 0px;
282. transform: rotate(-360deg); 283. }
284. }
285.
286. </style>
287.
288. </head>
289. <body>
290. <div class="solarsys">
291. <!--太阳-->
292. <div class='sun'></div>
293.
294. <!--⽔星轨道-->
295. <div class='mercuryOrbit'></div> 296.
297. <!--⽔星-->
298. <div class='mercury'></div> 299.
300. <!--⾦星轨道-->
301. <div class='venusOrbit'></div> 302.
303. <!--⾦星-->
304. <div class='venus'></div> 305.
306. <!--地球轨道-->
307. <div class='earthOrbit'></div> 308.
309. <!--地球-->
310. <div class='earth'></div> 311.
312. <!--⽕星轨道-->
313. <div class='marsOrbit'></div> 314.
315. <!--⽕星-->
316. <div class='mars'></div> 317.
318. <!--⽊星轨道-->
319. <div class='jupiterOrbit'></div> 320.
321. <!--⽊星-->
322. <div class='jupiter'></div> 323.
324. <!--⼟星轨道-->
325. <div class='saturnOrbit'></div> 326.
327. <!--⼟星-->
328. <div class='saturn'></div> 329.
330. <!--天王星轨道-->
331. <div class='uranusOrbit'></div> 332.
333. <!--天王星-->
334. <div class='uranus'></div> 335.
336. <!--海王星轨道-->
337. <div class='neptuneOrbit'></div> 338.
339. <!--海王星-->
以上这篇html+css3太阳系⾏星运转动画效果的实现代码就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。