附源代碼：
<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的位置擺放，要搞清楚父元素和子元素的順序
