利用CSS模拟太阳系运转

display: flex; /属性规定元素应该生成的框的类型。/
justify-content: center;
align-items: center;
position: relative;/属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。值：生成相对定位的元素，相对于其正常位置进行定位。/
}
.path2{
width: 400px;
height: 400px;
border:1px white solid;
border-radius: 200px;

display: inline-flex;
justify-content: center;
align-items: center;
position: relative;

}
.path3{
width: 300px;
height: 300px;
border:1px white solid;
border-radius: 150px;

display: inline-flex;
justify-content: center;
align-items: center;
position: relative;

}

.mars{
width: 80px;
height: 80px;
background: yellow;
border-radius: 40px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -190px;

animation: flyMars 6s infinite linear;
transform-origin: 50% 340px;
}

.earth{

width: 60px;
height: 60px;
background: blue;
border-radius: 30px;

display: flex;
justify-content: center;
align-items: center;

position: absolute;/如果要实现任意位置的定位，就将其position设置成absolute/
top:-30px;
animation: flyEarth 10s infinite linear;
transform-origin: 50% 180px;
}
.jupiter{
width: 40px;
height: 40px;
background: white;
border-radius: 20px;

display: flex;
justify-content: center;
align-items: center;

position: absolute;/如果要实现任意位置的定位，就将其position设置成absolute/
top:-70px;
animation: flyEarth 20s infinite linear;
transform-origin: 50% 220px;

}
.sun{
width: 60px;
height: 60px;
background: red;
border-radius: 30px;

display: flex;
justify-content: center;
align-items: center;
animation: sun 5s infinite;
transform-origin: 50% 50%;
}

@keyframes flyMars{
100%{
transform: rotate(1turn);
}
}
@keyframes flyEarth{
100%{
transform: rotate(360deg );/也可设置成1turn/
}
}
@keyframes flyjup{
100%{
transform-origin: (1turn);
}
}
@keyframes sun{
100%{
transform-origin: (1turn);
}
}
html,body{
height: 100%;
}

火星

地球

木星

太阳