* {
margin:0;
padding:0;
background:#040818;
background-size:1000%;
}
.box {
position:relative;
width:800px;
height:800px;
margin:100px auto;
transition:all 3s ease;
transform-origin:center;
animation:round 20s infinite linear;
}
@keyframes round {
0% {
transform:rotateZ(0deg)
}
100% {
transform:rotateZ(360deg)
}
}.sn {
position:absolute;
top:calc(50% - 125px);
left:calc(50% - 125px);
border:1px solid gray;
border-radius:50%;
}
.sn_1 {
width:250px;
height:250px;
z-index:99;
animation:round 10s infinite linear;
}
.sn_1::after {
position:absolute;
left:0px;
top:75px;
content:'';
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:red;
}
.sn_2::before {
position:absolute;
content:'';
display:block;
width:5px;
height:5px;
background-color:chartreuse;
border-radius:50%;
left:25px;
top:40px;
transform-origin:12px 12px;
animation:round 5s infinite linear;
}
.sn_2 {
top:calc(50% - 150px);
left:calc(50% - 150px);
width:300px;
height:300px;
z-index:89;
background-size:100%;
}
.sn_2::after {
position:absolute;
left:30px;
top:45px;
content:'';
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:lawngreen;
}
.sn_3 {
top:calc(50% - 175px);
left:calc(50% - 175px);
width:350px;
height:350px;
z-index:79;
background-size:100%;
}
.sn_3::after {
position:absolute;
left:30px;
top:55px;
content:'';
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:fuchsia;
}
.sn_4 {
position:absolute;
top:calc(50% - 200px);
left:calc(50% - 200px);
width:400px;
height:400px;
z-index:69;
background-size:100%;
animation:round 8s infinite linear;
}
.sn_4::after {
position:absolute;
left:25px;
top:300px;
content:'';
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:tomato;
}
.sn_5::before {
position:fixed;
left:207px;
top:0px;
content:'';
display:block;
width:5px;
height:5px;
background-color:#CC9900;
border-radius:50%;
z-index:60
}
.sn_5 {
top:calc(50% - 225px);
left:calc(50% - 225px);
width:450px;
height:450px;
z-index:59;
animation:round 15s infinite linear;
}
.sn_5::after {
position:absolute;
left:200px;
top:-8px;
content:'';
display:block;
width:15px;
height:20px;
border-radius:50%;
background:#040818;
border:2px solid gray;
}
.sn_6 {
top:calc(50% - 250px);
left:calc(50% - 250px);
width:500px;
height:500px;
z-index:49;
}
.sn_6::after {
position:absolute;
left:50px;
top:400px;
content:'';
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:#fff;
}
.sn_7 {
top:calc(50% - 275px);
left:calc(50% - 275px);
width:550px;
height:550px;
z-index:39;
}
.sn_7::after {
position:absolute;
left:500px;
top:120px;
content:'';
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:purple;
}
.sn_8 {
top:calc(50% - 300px);
left:calc(50% - 300px);
width:600px;
height:600px;
z-index:29;
}
.sn_8::after {
position:absolute;
left:300px;
top:-8px;
content:'';
display:block;
width:15px;
height:15px;
border-radius:50%;
background-color:orange;
}
.sn_9 {
top:calc(50% - 325px);
left:calc(50% - 325px);
width:650px;
height:650px;
z-index:19;
}
.sn_9::after {
position:absolute;
left:200px;
top:10px;
content:'';
display:block;
width:20px;
height:20px;
border-radius:50%;
background-color:blue;
}
.sn_10 {
top:calc(50% - 75px);
left:calc(50% - 75px);
background:#CC9900;
width:150px;
height:150px;
z-index:100;
box-shadow:0 0 25px 5px #CC9900;
}
更新时间:2019-09-08 22:44:04
行星环绕动画 .使用动画完成的运动旋转