附源代码：
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>Solar</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color:black;
/*display为flex后，所有flex中的所有子元素都成了伸缩项目，弹性盒子*/
display:flex;
/*横轴的对齐方式*/
justify-content:center;
/*竖轴的对齐方式*/
align-items:center;
}
html,body {
height:100%;
}
.path {
width:600px;
height:600px;
border:1px solid white;
border-radius:50%; /*圆角半径，形成圆的效果*/
display:flex; /* 使用flexible boxes这种布局方式 */
justify-content:center;
align-items:center;
position:relative; /* 相对定位，子元素会相对它进行定位 */
}
.path1{
width: 400px;
height: 400px;
border:1px solid white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.fire{
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/*Top和Left定义火星的位置，百分之是相对于父元素，*/
top: 75px;
left: calc(50% - 30px);
/*calc是计算函数，可以直接通过表达式计算*/
transform-origin: 50% 225px;
/*定义火星的旋转点*/
animation: fly 6s infinite linear;
/*调用函数，值分别为 函数名 时间 循环次数 速度*/
}
.sun {
width:100px;
height:100px;
background-color:red;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
}
.earth {
width:100px;
height:100px;
background-color:blue;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
/* 绝对定位，想相对于父元素进行任意位置的布局，一般采用绝对定位，此处是相对于path进行绝对定位
*/
position:absolute;
top:550px;
left:calc(50% - 50px); /*基于父视图座标系*/
transform-origin:50%-250px; /* 基于自身座标系 */
animation:fly 12s infinite linear;
border:1px solid white;
border-radius:50%;
}
.earth1 {
width:100px;
height:100px;
background-color:blue;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
/* 绝对定位，想相对于父元素进行任意位置的布局，一般采用绝对定位，此处是相对于path进行绝对定位
*/
position:absolute;
top:-50px;
left:calc(50% - 50px); /*基于父视图座标系*/
transform-origin:50% 350px; /* 基于自身座标系 */
animation:fly 10s infinite linear;
/*调用函数，值分别为 函数名 时间 循环次数 速度*/
}
#moon{width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -25px;
left: calc(50% - 25px);
transform-origin:50% 75px;
animation: fly 1s infinite linear;
}
@keyframes fly {
100% {
transform:rotate(1turn);
}
}
</style>
</head>
<body>
<div class="path">
<div class="path1">
<div class="sun">太阳</div>
<div class="earth">地球
<div id="moon">月亮</div>
</div>
<div class="earth1">地球1</div>
<div class="fire">火星</div>
</div>
</div>
</body>
</html>
效果图：
![]()
知识点：
- calc()，表示计算函数，括号中写表达式，eg：50%-30px，浏览器会计算该值
- 百分之的数，是针对于父元素的数值，eg:父元素的width是300px，如果子元素中有50%，则该值为150px
- transform-origin:100px 200px,表示(X轴移动)竖向移动和(Y轴移动)横向移动
- transform：rotate(40deg)，表示旋转40度，默认旋转的点为自身中心
- animation：fly 6s infinite linear，表示调用fly函数，时间为6秒，循环方式为无限循环，速度为匀速
- 该文件要注意div的位置摆放，要搞清楚父元素和子元素的顺序
