css3 3d 太阳系,纯CSS3太阳系

.stars {

position:absolute;

color:#0ef;

width:100%;

background-color:black;

height:100%;

overflow:hidden;

transform-style:preserve-3d;

perspective:1000px;

}

.stars:hover .hoop,.stars:hover .hoop:nth-of-type(2),.stars:hover .hoop:nth-of-type(3),.stars:hover .hoop:nth-of-type(4) {

animation-play-state:paused;

}

.stars:hover .hoop .star,.stars:hover .hoop .center,.stars:hover .hoop:nth-of-type(2) .star,.stars:hover .hoop:nth-of-type(2) .center,.stars:hover .hoop:nth-of-type(3) .star,.stars:hover .hoop:nth-of-type(3) .center,.stars:hover .hoop:nth-of-type(4) .star,.stars:hover .hoop:nth-of-type(4) .center {

animation-play-state:paused;

}

.stars .center,.stars .star,.stars .earth-star {

display:block;

width:40px;

height:40px;

background-color:#0ef;

position:absolute;

top:50%;

left:50%;

margin-top:-20px;

margin-left:-20px;

border-radius:50%;

box-shadow:0px 0px 2px #00DDFF,0px 0px 4px #00CCFF,0px 0px 6px #00BBFF,0px 0px 12px rgba(255,255,255,0.1),0px 0 10px rgba(255,255,255,0.1),0px 0px 6px rgba(255,255,255,0.1),0px 0px 10px rgba(255,255,255,0.1),0px 0px 40px rgba(255,255,255,0.15);

}

.stars .hoop {

position:absolute;

width:100px;

height:100px;

top:50%;

left:50%;

margin-top:-50px;

margin-left:-50px;

border:dashed 1px #099;

border-radius:50%;

box-sizing:border-box;

transform-style:preserve-3d;

backface-visibility:hidden;

perspective:1000px;

animation:loop1 7s linear infinite;

}

.stars .hoop .star {

width:20px;

height:20px;

top:10px;

left:60px;

animation:star1 7s linear infinite;

}

.stars .hoop .center {

animation:center 7s linear infinite;

}

.stars .hoop:nth-of-type(2) {

width:200px;

height:200px;

top:50%;

left:50%;

margin-top:-100px;

margin-left:-100px;

animation:loop1 8s linear infinite;

}

.stars .hoop:nth-of-type(2) .star {

width:18px;

height:18px;

top:11px;

left:109px;

animation:star1 8s linear infinite;

}

.stars .hoop:nth-of-type(3) {

width:300px;

height:300px;

top:50%;

left:50%;

margin-top:-150px;

margin-left:-150px;

animation:loop1 9s linear infinite;

}

.stars .hoop:nth-of-type(3) .star {

width:10px;

height:10px;

top:15px;

left:155px;

animation:star1 9s linear infinite;

}

.stars .hoop:nth-of-type(4) {

width:400px;

height:400px;

top:50%;

left:50%;

margin-top:-200px;

margin-left:-200px;

animation:loop1 10s linear infinite;

}

.stars .hoop:nth-of-type(4) .star {

width:10px;

height:10px;

top:15px;

left:205px;

animation:star1 10s linear infinite;

}

.stars .hoop:nth-of-type(5) {

width:480px;

height:480px;

margin-top:-240px;

margin-left:-240px;

border:dotted 3px #099;

animation:loop1 10s linear infinite;

}

.stars .hoop:nth-of-type(6) {

width:470px;

height:470px;

margin-top:-235px;

margin-left:-235px;

border:dotted 3px #099;

animation:loop1 10s linear infinite;

}

.stars .hoop:nth-of-type(7) {

width:460px;

height:460px;

margin-top:-230px;

margin-left:-230px;

border:dotted 3px #099;

animation:loop1 10s linear infinite;

}

.stars .hoop:nth-of-type(8) {

width:450px;

height:450px;

margin-top:-225px;

margin-left:-225px;

border:dotted 3px #099;

animation:loop1 10s linear infinite;

}

.stars .earth {

position:absolute;

width:40px;

height:40px;

top:-15px;

left:-15px;

border:dashed 1px #099;

border-radius:50%;

box-sizing:border-box;

transform-style:preserve-3d;

perspective:1000px;

animation:loop2 6s linear infinite;

}

.stars .earth .earth-star {

width:6px;

height:6px;

top:20px;

left:25px;

animation:star2 6s linear infinite;

}

@keyframes loop1 {

0% {

transform:rotateX(60deg) rotateY(30deg) rotateZ(0deg);

}

100% {

transform:rotateX(60deg) rotateY(30deg) rotateZ(360deg);

}

}@keyframes star1 {

0% {

transform:rotateZ(360deg) rotateY(-30deg) rotateX(-60deg);

}

100% {

transform:rotateZ(0deg) rotateY(-30deg) rotateX(-60deg);

}

}@keyframes center {

0% {

transform:rotateZ(360deg) rotateY(0deg) rotateX(120deg);

}

100% {

transform:rotateZ(0deg) rotateY(0deg) rotateX(120deg);

}

}@keyframes loop2 {

0% {

transform:rotateX(-30deg) rotateY(30deg) rotateZ(0deg);

}

100% {

transform:rotateX(-30deg) rotateY(30deg) rotateZ(360deg);

}

}@keyframes star2 {

0% {

transform:rotateZ(360deg) rotateY(-30deg) rotateX(30deg);

}

100% {

transform:rotateZ(0deg) rotateY(-30deg) rotateX(30deg);

}

}