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);
}
}