1 <!DOCTYPE html>
2 <html lang="zh">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <title>CSS3实现星系轨道旋转特效</title>
8 <link rel="stylesheet" type="text/css" href="base.css">
9 </head>
10
11 <body>
12 <div class="xx">
13 <div class="center">
14 <div class="ui_base1 u_p3d">
15 <div class="base u_p3d">
16 <div class="pan"></div>
17 <div class="ball_base u_p3d ball_1">
18 <div class="ball">火星</div>
19 </div>
20 <div class="ball_base u_p3d ball_2">
21 <div class="ball">水星</div>
22 </div>
23 <div class="ball_base u_p3d ball_3">
24 <div class="ball">金星</div>
25 </div>
26 <div class="ball_base u_p3d ball_4">
27 <div class="ball">木星</div>
28 </div>
29 <div class="ball_base u_p3d ball_5">
30 <div class="ball">土星</div>
31 </div>
32 <div class="ball_base u_p3d ball_6">
33 <div class="ball">天王星</div>
34 </div>
35 <div class="ball_base u_p3d ball_7">
36 <div class="ball">海王星</div>
37 </div>
38 <div class="ball_base u_p3d ball_8">
39 <div class="ball">大王星</div>
40 </div>
41 </div>
42 </div>
43 <!-- <div class="ui_base2 u_p3d">
44 <div class="base u_p3d">
45 <div class="pan"></div>
46 <div class="ball_base u_p3d ball_1">
47 <div class="ball">火星</div>
48 </div>
49 <div class="ball_base u_p3d ball_2">
50 <div class="ball">水星</div>
51 </div>
52 <div class="ball_base u_p3d ball_3">
53 <div class="ball">金星</div>
54 </div>
55 <div class="ball_base u_p3d ball_4">
56 <div class="ball">木星</div>
57 </div>
58 <div class="ball_base u_p3d ball_5">
59 <div class="ball">土星</div>
60 </div>
61 <div class="ball_base u_p3d ball_6">
62 <div class="ball">天王星</div>
63 </div>
64 <div class="ball_base u_p3d ball_7">
65 <div class="ball">海王星</div>
66 </div>
67 <div class="ball_base u_p3d ball_8">
68 <div class="ball">大王星</div>
69 </div>
70 </div>
71 </div> -->
72
73 </div>
74 </div>
75
76 </body>
77
78 </html>
1 * {
2 margin: 0;
3 padding: 0;
4 list-style: ntwo;
5 }
6
7 body {
8 width: 100%;
9 height: 100%;
10 min-width: 1890px;
11 min-height: 950px;
12 background: #d45a00;
13 font-family: microsoft yahei;
14 }
15
16 .center {
17 width: 41%;
18 margin: auto;
19 min-width: 735px;
20 min-height: 650px;
21 background-color: #0f1f49;
22 overflow: hidden;
23 position: relative;
24 }
25
26 @-webkit-keyframes one1 {
27 0% {
28 -webkit-transform: rotateY(0deg) rotateZ(10deg);
29 }
30 100% {
31 -webkit-transform: rotateY(-360deg) rotateZ(10deg);
32 }
33 }
34
35 @keyframes one1 {
36 0% {
37 transform: rotateY(0deg) rotateZ(10deg);
38 }
39 100% {
40 transform: rotateY(-360deg) rotateZ(10deg);
41 }
42 }
43
44 @-webkit-keyframes one2 {
45 0% {
46 -webkit-transform: rotateY(-45deg) rotateZ(10deg);
47 }
48 100% {
49 -webkit-transform: rotateY(-405deg) rotateZ(10deg);
50 }
51 }
52
53 @keyframes one2 {
54 0% {
55 transform: rotateY(-45deg) rotateZ(10deg);
56 }
57 100% {
58 transform: rotateY(-405deg) rotateZ(10deg);
59 }
60 }
61
62 @-webkit-keyframes one3 {
63 0% {
64 -webkit-transform: rotateY(-90deg) rotateZ(10deg);
65 }
66 100% {
67 -webkit-transform: rotateY(-450deg) rotateZ(10deg);
68 }
69 }
70
71 @keyframes one3 {
72 0% {
73 transform: rotateY(-90deg) rotateZ(10deg);
74 }
75 100% {
76 transform: rotateY(-450deg) rotateZ(10deg);
77 }
78 }
79
80 @-webkit-keyframes one4 {
81 0% {
82 -webkit-transform: rotateY(-135deg) rotateZ(10deg);
83 }
84 100% {
85 -webkit-transform: rotateY(-495deg) rotateZ(10deg);
86 }
87 }
88
89 @keyframes one4 {
90 0% {
91 transform: rotateY(-135deg) rotateZ(10deg);
92 }
93 100% {
94 transform: rotateY(-495deg) rotateZ(10deg);
95 }
96 }
97
98 @-webkit-keyframes one5 {
99 0% {
100 -webkit-transform: rotateY(-180deg) rotateZ(10deg);
101 }
102 100% {
103 -webkit-transform: rotateY(-540deg) rotateZ(10deg);
104 }
105 }
106
107 @keyframes one5 {
108 0% {
109 transform: rotateY(-180deg) rotateZ(10deg);
110 }
111 100% {
112 transform: rotateY(-540deg) rotateZ(10deg);
113 }
114 }
115
116 @-webkit-keyframes one6 {
117 0% {
118 -webkit-transform: rotateY(-225deg) rotateZ(10deg);
119 }
120 100% {
121 -webkit-transform: rotateY(-585deg) rotateZ(10deg);
122 }
123 }
124
125 @keyframes one6 {
126 0% {
127 transform: rotateY(-225deg) rotateZ(10deg);
128 }
129 100% {
130 transform: rotateY(-585deg) rotateZ(10deg);
131 }
132 }
133
134 @-webkit-keyframes one7 {
135 0% {
136 -webkit-transform: rotateY(-270deg) rotateZ(10deg);
137 }
138 100% {
139 -webkit-transform: rotateY(-630deg) rotateZ(10deg);
140 }
141 }
142
143 @keyframes one7 {
144 0% {
145 transform: rotateY(-270deg) rotateZ(10deg);
146 }
147 100% {
148 transform: rotateY(-630deg) rotateZ(10deg);
149 }
150 }
151
152 @-webkit-keyframes one8 {
153 0% {
154 -webkit-transform: rotateY(-315deg) rotateZ(10deg);
155 }
156 100% {
157 -webkit-transform: rotateY(-675deg) rotateZ(10deg);
158 }
159 }
160
161 @keyframes one8 {
162 0% {
163 transform: rotateY(-315deg) rotateZ(10deg);
164 }
165 100% {
166 transform: rotateY(-675deg) rotateZ(10deg);
167 }
168 }
169
170 @keyframes one {
171 0% {
172 transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg);
173 }
174 100% {
175 transform: rotateX(70deg) rotateY(-10deg) rotateZ(-360deg);
176 }
177 }
178
179 @keyframes one_p {
180 0% {
181 transform: rotateZ(0deg);
182 }
183 100% {
184 transform: rotateZ(-360deg);
185 }
186 }
187
188 @-webkit-keyframes one {
189 0% {
190 -webkit-transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg);
191 }
192 100% {
193 -webkit-transform: rotateX(70deg) rotateY(-10deg) rotateZ(-360deg);
194 }
195 }
196
197 @-webkit-keyframes one_p {
198 0% {
199 -webkit-transform: rotateZ(0deg);
200 }
201 100% {
202 -webkit-transform: rotateZ(-360deg);
203 }
204 }
205
206 .u_p3d {
207 -webkit-transform-style: preserve-3d !important;
208 transform-style: preserve-3d !important;
209 }
210
211 .ui_base1 {
212 position: absolute;
213 width: 400px;
214 height: 0px;
215 margin: 19% 22%;
216 -webkit-perspective: 1000px;
217 -webkit-perspective-origin: 50% 0%;
218 perspective: 1000px;
219 perspective-origin: 50% 0%;
220 }
221
222 .ui_base1 .base {
223 -webkit-transform: rotateX(80deg) rotateY(-10deg);
224 transform: rotateX(80deg) rotateY(-10deg);
225 position: absolute;
226 width: 350px;
227 height: 350px;
228 -webkit-backface-visibility: hidden;
229 backface-visibility: hidden;
230 animation: one 10s linear 0s infinite;
231 }
232
233 .ui_base1 .ball_base {
234 -webkit-transform-origin: 225px 0px;
235 transform-origin: 225px 0px;
236 position: absolute;
237 top: 175px;
238 left: -50px;
239 width: 225px;
240 height: 127px;
241 }
242
243 .ui_base1 .ball {
244 -webkit-transition: all 2s ease-out 0ms;
245 transition: all 2s ease-out 0ms;
246 -webkit-transform-origin: 50% 50%;
247 transform-origin: 50% 50%;
248 position: absolute;
249 width: 50px;
250 height: 50px;
251 line-height: 50px;
252 text-align: center;
253 background-image: url(img/hovertreeball.png);
254 background-size: 100% 100%;
255 left: 0px;
256 top: 0px;
257 color: rgba(255, 255, 255, 0);
258 font-size: 12px;
259 opacity: 1;
260 overflow: hidden;
261 }
262
263 .ui_base1 .pan {
264 position: absolute;
265 width: 100%;
266 height: 100%;
267 background-image: url("img/c.png");
268 background-size: 100% 100%;
269 -webkit-animation: one_p 5s linear 0s infinite;
270 animation: one_p 5s linear 0s infinite;
271 }
272
273 .ui_base1 .ball {
274 color: #fff;
275 opacity: 1;
276 }
277
278 .ui_base1 .ball_1 .ball {
279 transform: rotateY(10deg) rotateZ(10deg);
280 animation: one1 10s linear 0s infinite;
281 -webkit-transition-delay: 1500ms !important;
282 transition-delay: 1500ms !important;
283 }
284
285 .ui_base1 .ball_2 .ball {
286 -webkit-animation: one2 10s linear 0s infinite;
287 animation: one2 10s linear 0s infinite;
288 -webkit-transition-delay: 1300ms !important;
289 transition-delay: 1300ms !important;
290 }
291
292 .ui_base1 .ball_3 .ball {
293 -webkit-animation: one3 10s linear 0s infinite;
294 animation: one3 10s linear 0s infinite;
295 -webkit-transition-delay: 1100ms !important;
296 transition-delay: 1100ms !important;
297 }
298
299 .ui_base1 .ball_4 .ball {
300 -webkit-animation: one4 10s linear 0s infinite;
301 animation: one4 10s linear 0s infinite;
302 -webkit-transition-delay: 900ms !important;
303 transition-delay: 900ms !important;
304 }
305
306 .ui_base1 .ball_5 .ball {
307 -webkit-animation: one5 10s linear 0s infinite;
308 animation: one5 10s linear 0s infinite;
309 -webkit-transition-delay: 700ms !important;
310 transition-delay: 700ms !important;
311 }
312
313 .ui_base1 .ball_6 .ball {
314 -webkit-animation: one6 10s linear 0s infinite;
315 animation: one6 10s linear 0s infinite;
316 -webkit-transition-delay: 500ms !important;
317 transition-delay: 500ms !important;
318 }
319
320 .ui_base1 .ball_7 .ball {
321 -webkit-animation: one6 10s linear 0s infinite;
322 animation: one7 10s linear 0s infinite;
323 -webkit-transition-delay: 300ms !important;
324 transition-delay: 300ms !important;
325 }
326
327 .ui_base1 .ball_8 .ball {
328 -webkit-animation: one6 10s linear 0s infinite;
329 animation: one8 10s linear 0s infinite;
330 -webkit-transition-delay: 100ms !important;
331 transition-delay: 100ms !important;
332 }
333
334 .ui_base1 .ball_1 {
335 -webkit-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
336 transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
337 }
338
339 .ui_base1 .ball_2 {
340 -webkit-transform: rotateX(-90deg) rotateY(45deg) translateY(-70px);
341 transform: rotateX(-90deg) rotateY(45deg) translateY(-70px);
342 }
343
344 .ui_base1 .ball_3 {
345 -webkit-transform: rotateX(-90deg) rotateY(90deg) translateY(-70px);
346 transform: rotateX(-90deg) rotateY(90deg) translateY(-70px);
347 }
348
349 .ui_base1 .ball_4 {
350 -webkit-transform: rotateX(-90deg) rotateY(135deg) translateY(-70px);
351 transform: rotateX(-90deg) rotateY(135deg) translateY(-70px);
352 }
353
354 .ui_base1 .ball_5 {
355 -webkit-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
356 transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
357 }
358
359 .ui_base1 .ball_6 {
360 -webkit-transform: rotateX(-90deg) rotateY(225deg) translateY(-70px);
361 transform: rotateX(-90deg) rotateY(225deg) translateY(-70px);
362 }
363
364 .ui_base1 .ball_7 {
365 -webkit-transform: rotateX(-90deg) rotateY(270deg) translateY(-70px);
366 transform: rotateX(-90deg) rotateY(270deg) translateY(-70px);
367 }
368
369 .ui_base1 .ball_8 {
370 -webkit-transform: rotateX(-90deg) rotateY(315deg) translateY(-70px);
371 transform: rotateX(-90deg) rotateY(315deg) translateY(-70px);
372 }
373
374
375 /******************************************************2*********************************/
376
377 * {
378 margin: 0;
379 padding: 0;
380 list-style: none;
381 }
382
383 body {
384 background: #d45a00;
385 font-family: microsoft yahei;
386 }
387
388 @-webkit-keyframes two1 {
389 0% {
390 -webkit-transform: rotateY(0deg) rotateZ(10deg);
391 }
392 100% {
393 -webkit-transform: rotateY(-360deg) rotateZ(10deg);
394 }
395 }
396
397 @keyframes two1 {
398 0% {
399 transform: rotateY(0deg) rotateZ(10deg);
400 }
401 100% {
402 transform: rotateY(-360deg) rotateZ(10deg);
403 }
404 }
405
406 @-webkit-keyframes two2 {
407 0% {
408 -webkit-transform: rotateY(-45deg) rotateZ(10deg);
409 }
410 100% {
411 -webkit-transform: rotateY(-405deg) rotateZ(10deg);
412 }
413 }
414
415 @keyframes two2 {
416 0% {
417 transform: rotateY(-45deg) rotateZ(10deg);
418 }
419 100% {
420 transform: rotateY(-405deg) rotateZ(10deg);
421 }
422 }
423
424 @-webkit-keyframes two3 {
425 0% {
426 -webkit-transform: rotateY(-90deg) rotateZ(10deg);
427 }
428 100% {
429 -webkit-transform: rotateY(-450deg) rotateZ(10deg);
430 }
431 }
432
433 @keyframes two3 {
434 0% {
435 transform: rotateY(-90deg) rotateZ(10deg);
436 }
437 100% {
438 transform: rotateY(-450deg) rotateZ(10deg);
439 }
440 }
441
442 @-webkit-keyframes two4 {
443 0% {
444 -webkit-transform: rotateY(-135deg) rotateZ(10deg);
445 }
446 100% {
447 -webkit-transform: rotateY(-495deg) rotateZ(10deg);
448 }
449 }
450
451 @keyframes two4 {
452 0% {
453 transform: rotateY(-135deg) rotateZ(10deg);
454 }
455 100% {
456 transform: rotateY(-495deg) rotateZ(10deg);
457 }
458 }
459
460 @-webkit-keyframes two5 {
461 0% {
462 -webkit-transform: rotateY(-180deg) rotateZ(10deg);
463 }
464 100% {
465 -webkit-transform: rotateY(-540deg) rotateZ(10deg);
466 }
467 }
468
469 @keyframes two5 {
470 0% {
471 transform: rotateY(-180deg) rotateZ(10deg);
472 }
473 100% {
474 transform: rotateY(-540deg) rotateZ(10deg);
475 }
476 }
477
478 @-webkit-keyframes two6 {
479 0% {
480 -webkit-transform: rotateY(-225deg) rotateZ(10deg);
481 }
482 100% {
483 -webkit-transform: rotateY(-585deg) rotateZ(10deg);
484 }
485 }
486
487 @keyframes two6 {
488 0% {
489 transform: rotateY(-225deg) rotateZ(10deg);
490 }
491 100% {
492 transform: rotateY(-585deg) rotateZ(10deg);
493 }
494 }
495
496 @-webkit-keyframes two7 {
497 0% {
498 -webkit-transform: rotateY(-270deg) rotateZ(10deg);
499 }
500 100% {
501 -webkit-transform: rotateY(-630deg) rotateZ(10deg);
502 }
503 }
504
505 @keyframes two7 {
506 0% {
507 transform: rotateY(-270deg) rotateZ(10deg);
508 }
509 100% {
510 transform: rotateY(-630deg) rotateZ(10deg);
511 }
512 }
513
514 @-webkit-keyframes two8 {
515 0% {
516 -webkit-transform: rotateY(-315deg) rotateZ(10deg);
517 }
518 100% {
519 -webkit-transform: rotateY(-675deg) rotateZ(10deg);
520 }
521 }
522
523 @keyframes two8 {
524 0% {
525 transform: rotateY(-315deg) rotateZ(10deg);
526 }
527 100% {
528 transform: rotateY(-675deg) rotateZ(10deg);
529 }
530 }
531
532 @keyframes two {
533 0% {
534 transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg);
535 }
536 100% {
537 transform: rotateX(70deg) rotateY(-10deg) rotateZ(-360deg);
538 }
539 }
540
541 @keyframes two_p {
542 0% {
543 transform: rotateZ(0deg);
544 }
545 100% {
546 transform: rotateZ(-360deg);
547 }
548 }
549
550 @-webkit-keyframes two {
551 0% {
552 -webkit-transform: rotateX(70deg) rotateY(-10deg) rotateZ(0deg);
553 }
554 100% {
555 -webkit-transform: rotateX(70deg) rotateY(-10deg) rotateZ(-360deg);
556 }
557 }
558
559 @-webkit-keyframes two_p {
560 0% {
561 -webkit-transform: rotateZ(0deg);
562 }
563 100% {
564 -webkit-transform: rotateZ(-360deg);
565 }
566 }
567
568 .u_p3d {
569 -webkit-transform-style: preserve-3d !important;
570 transform-style: preserve-3d !important;
571 }
572
573 .ui_base2 {
574 position: absolute;
575 width: 500px;
576 height: 0px;
577 margin: 12% 16%;
578 -webkit-perspective: 1000px;
579 -webkit-perspective-origin: 140% 0%;
580 perspective: 1000px;
581 perspective-origin: 140% 0%;
582 }
583
584 .ui_base2 .base {
585 -webkit-transform: rotateX(80deg) rotateY(-10deg);
586 transform: rotateX(80deg) rotateY(-10deg);
587 position: absolute;
588 width: 500px;
589 height: 500px;
590 -webkit-backface-visibility: hidden;
591 backface-visibility: hidden;
592 animation: two 10s linear 0s infinite;
593 }
594
595 .ui_base2 .ball_base {
596 -webkit-transform-origin: 107% 0px;
597 transform-origin: 107% 0px;
598 position: absolute;
599 top: 175px;
600 left: -50px;
601 width: 50%;
602 height: 127px;
603 }
604
605 .ui_base2 .ball {
606 -webkit-transition: all 2s ease-out 0ms;
607 transition: all 2s ease-out 0ms;
608 -webkit-transform-origin: 50% 50%;
609 transform-origin: 50% 50%;
610 position: absolute;
611 width: 50px;
612 height: 50px;
613 line-height: 50px;
614 text-align: center;
615 background-image: url(img/hovertreeball.png);
616 background-size: 100% 100%;
617 left: 0px;
618 top: 0px;
619 color: rgba(255, 255, 255, 0);
620 font-size: 12px;
621 opacity: 1;
622 overflow: hidden;
623 }
624
625 .ui_base2 .pan {
626 position: absolute;
627 width: 100%;
628 height: 100%;
629 background-image: url("img/c.png");
630 background-size: 100% 100%;
631 -webkit-animation: two_p 5s linear 0s infinite;
632 animation: two_p 5s linear 0s infinite;
633 }
634
635 .ui_base2 .ball {
636 color: #fff;
637 opacity: 1;
638 }
639
640 .ui_base2 .ball_1 .ball {
641 transform: rotateY(10deg) rotateZ(10deg);
642 animation: two1 10s linear 0s infinite;
643 -webkit-transition-delay: 1500ms !important;
644 transition-delay: 1500ms !important;
645 }
646
647 .ui_base2 .ball_2 .ball {
648 -webkit-animation: two2 10s linear 0s infinite;
649 animation: two2 10s linear 0s infinite;
650 -webkit-transition-delay: 1300ms !important;
651 transition-delay: 1300ms !important;
652 }
653
654 .ui_base2 .ball_3 .ball {
655 -webkit-animation: two3 10s linear 0s infinite;
656 animation: two3 10s linear 0s infinite;
657 -webkit-transition-delay: 1100ms !important;
658 transition-delay: 1100ms !important;
659 }
660
661 .ui_base2 .ball_4 .ball {
662 -webkit-animation: two4 10s linear 0s infinite;
663 animation: two4 10s linear 0s infinite;
664 -webkit-transition-delay: 900ms !important;
665 transition-delay: 900ms !important;
666 }
667
668 .ui_base2 .ball_5 .ball {
669 -webkit-animation: two5 10s linear 0s infinite;
670 animation: two5 10s linear 0s infinite;
671 -webkit-transition-delay: 700ms !important;
672 transition-delay: 700ms !important;
673 }
674
675 .ui_base2 .ball_6 .ball {
676 -webkit-animation: two6 10s linear 0s infinite;
677 animation: two6 10s linear 0s infinite;
678 -webkit-transition-delay: 500ms !important;
679 transition-delay: 500ms !important;
680 }
681
682 .ui_base2 .ball_7 .ball {
683 -webkit-animation: two6 10s linear 0s infinite;
684 animation: two7 10s linear 0s infinite;
685 -webkit-transition-delay: 300ms !important;
686 transition-delay: 300ms !important;
687 }
688
689 .ui_base2 .ball_8 .ball {
690 -webkit-animation: two6 10s linear 0s infinite;
691 animation: two8 10s linear 0s infinite;
692 -webkit-transition-delay: 100ms !important;
693 transition-delay: 100ms !important;
694 }
695
696 .ui_base2 .ball_1 {
697 -webkit-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
698 transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
699 }
700
701 .ui_base2 .ball_2 {
702 -webkit-transform: rotateX(-90deg) rotateY(45deg) translateY(-70px);
703 transform: rotateX(-90deg) rotateY(45deg) translateY(-70px);
704 }
705
706 .ui_base2 .ball_3 {
707 -webkit-transform: rotateX(-90deg) rotateY(90deg) translateY(-70px);
708 transform: rotateX(-90deg) rotateY(90deg) translateY(-70px);
709 }
710
711 .ui_base2 .ball_4 {
712 -webkit-transform: rotateX(-90deg) rotateY(135deg) translateY(-70px);
713 transform: rotateX(-90deg) rotateY(135deg) translateY(-70px);
714 }
715
716 .ui_base2 .ball_5 {
717 -webkit-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
718 transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
719 }
720
721 .ui_base2 .ball_6 {
722 -webkit-transform: rotateX(-90deg) rotateY(225deg) translateY(-70px);
723 transform: rotateX(-90deg) rotateY(225deg) translateY(-70px);
724 }
725
726 .ui_base2 .ball_7 {
727 -webkit-transform: rotateX(-90deg) rotateY(270deg) translateY(-70px);
728 transform: rotateX(-90deg) rotateY(270deg) translateY(-70px);
729 }
730
731 .ui_base2 .ball_8 {
732 -webkit-transform: rotateX(-90deg) rotateY(315deg) translateY(-70px);
733 transform: rotateX(-90deg) rotateY(315deg) translateY(-70px);
734 }
