html5 星际摩托,HTML5 星际陨石环绕动效

CSS

语言：

CSSSCSS

确定

/* moving orbits */

body{background:#211;}

#orbits {

position: absolute;

text-align: center;

height: 556px;

width: 549px;

left: calc(50% - 274px);

z-index: -99;

top: 35px;

background: url(/uploads/150801/globe.png) no-repeat;

}

div.orbits:before {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

margin-right: -0.25em;

}

div.orbit:after {

-webkit-animation: planet-rotate 4s linear infinite;

-moz-animation: planet-rotate 4s linear infinite;

animation: planet-rotate 4s linear infinite;

background-color: #211a00;

border-radius: 50%;

content: '';

display: block;

}

div.orbit {

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

}

div.orbit:nth-of-type(1) {

-webkit-animation: orbit-rotate 4s linear infinite;

-moz-animation: orbit-rotate 4s linear infinite;

animation: orbit-rotate 4s linear infinite;

-webkit-animation-delay: -2.72s;

-moz-animation-delay: -2.72s;

animation-delay: -2.72s;

position: absolute;

top: 58.4%;

left: -9.4%;

width: 118.8%;

}

div.orbit:nth-of-type(1):after {

-webkit-animation-delay: -2.72s;

-moz-animation-delay: -2.72s;

animation-delay: -2.72s;

height: 81px;

width: 66px;

background: url(/uploads/150801/01.png) no-repeat;

}

div.orbit:nth-of-type(2) {

-webkit-animation: orbit-rotate 4s linear infinite;

-moz-animation: orbit-rotate 4s linear infinite;

animation: orbit-rotate 4s linear infinite;

-webkit-animation-delay: -0.12s;

-moz-animation-delay: -0.12s;

animation-delay: -0.12s;

position: absolute;

top: 87.8%;

left: -0.4%;

width: 100.8%;

}

div.orbit:nth-of-type(2):after {

-webkit-animation-delay: -0.12s;

-moz-animation-delay: -0.12s;

animation-delay: -0.12s;

height: 30px;

width: 31px;

background: url(/uploads/150801/02.png) no-repeat;

}

div.orbit:nth-of-type(3) {

-webkit-animation: orbit-rotate 4s linear infinite;

-moz-animation: orbit-rotate 4s linear infinite;

animation: orbit-rotate 4s linear infinite;

-webkit-animation-delay: -0.92s;

-moz-animation-delay: -0.92s;

animation-delay: -0.92s;

position: absolute;

top: 47.2%;

left: -10%;

width: 120%;

}

div.orbit:nth-of-type(3):after {

-webkit-animation-delay: -0.92s;

-moz-animation-delay: -0.92s;

animation-delay: -0.92s;

height: 17px;

width: 13px;

background: url(/uploads/150801/03.png) no-repeat;

}

div.orbit:nth-of-type(4) {

-webkit-animation: orbit-rotate 4s linear infinite;

-moz-animation: orbit-rotate 4s linear infinite;

animation: orbit-rotate 4s linear infinite;

-webkit-animation-delay: -1.44s;

-moz-animation-delay: -1.44s;

animation-delay: -1.44s;

position: absolute;

top: 40.2%;

left: -9.4%;

width: 118.8%;

}

div.orbit:nth-of-type(4):after {

-webkit-animation-delay: -1.44s;

-moz-animation-delay: -1.44s;

animation-delay: -1.44s;

height: 17px;

width: 11px;

background: url(/uploads/150801/04.png) no-repeat;

}

div.orbit:nth-of-type(5) {

-webkit-animation: orbit-rotate 4s linear infinite;

-moz-animation: orbit-rotate 4s linear infinite;

animation: orbit-rotate 4s linear infinite;

-webkit-animation-delay: -2.88s;

-moz-animation-delay: -2.88s;

animation-delay: -2.88s;

position: absolute;

top: 17.8%;

left: -3.4%;

width: 106.8%;

}

div.orbit:nth-of-type(5):after {

-webkit-animation-delay: -2.88s;

-moz-animation-delay: -2.88s;

animation-delay: -2.88s;

height: 20px;

width: 19px;

background: url(/uploads/150801/05.png) no-repeat;

}

div.orbit:nth-of-type(6) {

-webkit-animation: orbit-rotate 4s linear infinite;

-moz-animation: orbit-rotate 4s linear infinite;

animation: orbit-rotate 4s linear infinite;

-webkit-animation-delay: -0.68s;

-moz-animation-delay: -0.68s;

animation-delay: -0.68s;

position: absolute;

top: 13.6%;

left: -1.6%;

width: 103.2%;

}

div.orbit:nth-of-type(6):after {

-webkit-animation-delay: -0.68s;

-moz-animation-delay: -0.68s;

animation-delay: -0.68s;

height: 13px;

width: 12px;

background: url(/uploads/150801/06.png) no-repeat;

}

div.orbit:nth-of-type(7) {

-webkit-animation: orbit-rotate 4s linear infinite;

-moz-animation: orbit-rotate 4s linear infinite;

animation: orbit-rotate 4s linear infinite;

-webkit-animation-delay: -2.24s;

-moz-animation-delay: -2.24s;

animation-delay: -2.24s;

position: absolute;

top: -0.4%;

left: 8.6%;

width: 82.8%;

}

div.orbit:nth-of-type(7):after {

-webkit-animation-delay: -2.24s;

-moz-animation-delay: -2.24s;

animation-delay: -2.24s;

height: 26px;

width: 24px;

background: url(/uploads/150801/07.png) no-repeat;

}

div.orbit:nth-of-type(8) {

-webkit-animation: orbit-rotate 4s linear infinite;

-moz-animation: orbit-rotate 4s linear infinite;

animation: orbit-rotate 4s linear infinite;

-webkit-animation-delay: -2s;

-moz-animation-delay: -2s;

animation-delay: -2s;

position: absolute;

top: -14.4%;

left: 26.6%;

width: 46.8%;

}

div.orbit:nth-of-type(8):after {

-webkit-animation-delay: -2s;

-moz-animation-delay: -2s;

animation-delay: -2s;

height: 16px;

width: 15px;

background: url(/uploads/150801/08.png) no-repeat;

}

@-webkit-keyframes orbit-rotate {

from {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(360deg);

-moz-transform: rotateY(360deg);

-ms-transform: rotateY(360deg);

-o-transform: rotateY(360deg);

transform: rotateY(360deg);

}

}

@-moz-keyframes orbit-rotate {

from {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(360deg);

-moz-transform: rotateY(360deg);

-ms-transform: rotateY(360deg);

-o-transform: rotateY(360deg);

transform: rotateY(360deg);

}

}

@-o-keyframes orbit-rotate {

from {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(360deg);

-moz-transform: rotateY(360deg);

-ms-transform: rotateY(360deg);

-o-transform: rotateY(360deg);

transform: rotateY(360deg);

}

}

@keyframes orbit-rotate {

from {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(360deg);

-moz-transform: rotateY(360deg);

-ms-transform: rotateY(360deg);

-o-transform: rotateY(360deg);

transform: rotateY(360deg);

}

}

@-webkit-keyframes planet-rotate {

from {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}

@-moz-keyframes planet-rotate {

from {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}

@-o-keyframes planet-rotate {

from {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}

@keyframes planet-rotate {

from {

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

transform: rotateY(0deg);

}

to {

-webkit-transform: rotateY(-360deg);

-moz-transform: rotateY(-360deg);

-ms-transform: rotateY(-360deg);

-o-transform: rotateY(-360deg);

transform: rotateY(-360deg);

}

}