html5行星环绕,CSS3 星球环绕动画

body {

margin:0;

padding:0;

background:#080e24 url(./bg.jpg) repeat;

}

ul {

width:600px;

height:600px;

margin:40px auto;

position:relative;

list-style:none;

}

ul li {

border:2px solid #394057;

position:absolute;

left:50%;

top:50%;

border-radius:50%;

transform:translate(-50%,-50%);

box-sizing:border-box;

animation-iteration-count:infinite;

animation-timing-function:linear;

animation-name:orbit;

}

ul li span {

display:block;

position:absolute;

left:0;

width:12px;

height:12px;

border-radius:50%;

}

ul li:nth-child(1) {

width:60px;

height:60px;

border:none;

box-shadow:0 0 50px #c90;

background-color:#C90;

animation-duration:5s;

}

ul li:nth-child(2) {

width:120px;

height:120px;

animation-duration:6s;

}

ul li:nth-child(2) span {

background-color:yellow;

left:80px;

top:0;

}

ul li:nth-child(3) {

width:180px;

height:180px;

animation-duration:10s;

}

ul li:nth-child(3) span {

background-color:blue;

left:47px;

top:0;

}

ul li:nth-child(4) {

width:240px;

height:240px;

animation-duration:12s;

}

ul li:nth-child(4) > span {

background-color:green;

left:209px;

top:43px;

animation:orbit 2s infinite linear;

}

ul li:nth-child(4) > span span {

width:6px;

height:6px;

left:16px;

background-color:yellow;

}

ul li:nth-child(5) {

width:300px;

height:300px;

background-image:url(./asteroids_meteorids.png);

background-size:cover;

animation-duration:25s;

}

ul li:nth-child(5) span {

background-color:red;

left:95px;

top:0;

}

ul li:nth-child(6) {

width:360px;

height:360px;

animation-duration:20s;

}

ul li:nth-child(6) span {

background-color:#CCC;

left:-5px;

top:200px;

}

ul li:nth-child(7) {

width:420px;

height:420px;

animation-duration:30s;

}

ul li:nth-child(7) > span {

background-color:green;

left:300px;

top:18px;

}

ul li:nth-child(7) > span span {

width:15px;

height:15px;

border:2px solid #CCC;

left:-4px;

top:-4px;

transform:skew(0,45deg);

}

ul li:nth-child(8) {

width:480px;

height:480px;

animation-duration:35s;

}

ul li:nth-child(8) span {

background-color:pink;

left:0;

top:170px;

}

ul li:nth-child(9) {

width:540px;

height:540px;

animation-duration:40s;

}

ul li:nth-child(9) span {

background-color:blue;

left:47px;

top:100px;

}

ul li:nth-child(10) {

width:600px;

height:600px;

animation-duration:45s;

}

ul li:nth-child(10) span {

background-color:yellow;

left:224px;

top:0;

}

@keyframes orbit {

0% {

transform:translate(-50%,-50%) rotate(0deg);

}

100% {

transform:translate(-50%,-50%) rotate(360deg);

}

}