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,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,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 }
