# 如何用CSS實現地球和月亮的公轉
## 引言
在網頁設計中，CSS不僅可以用于布局和樣式美化，還能通過動畫和變換實現令人驚嘆的動態效果。本文將詳細介紹如何僅用HTML和CSS創建一個地球繞太陽公轉、月亮繞地球公轉的完整天文模型。我們將從基礎概念講起，逐步實現軌道運動、自轉效果和光照陰影，最終形成一個完整的太陽系微縮模型。
## 一、基礎HTML結構
首先建立基礎的HTML框架，創建三個`<div>`元素分別代表太陽、地球和月亮：
```html
<div class="solar-system">
<div class="sun"></div>
<div class="earth-orbit">
<div class="earth">
<div class="moon-orbit">
<div class="moon"></div>
</div>
</div>
</div>
</div>
為天體設置基本樣式和初始位置：
.solar-system {
position: relative;
width: 600px;
height: 600px;
margin: 50px auto;
background: #000;
border-radius: 50%;
}
.sun {
position: absolute;
width: 80px;
height: 80px;
background: radial-gradient(circle, #fdb813, #f88b06);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px #f5b342;
}
.earth-orbit {
position: absolute;
width: 400px;
height: 400px;
border: 1px dashed rgba(255,255,255,0.2);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.earth {
width: 30px;
height: 30px;
background: radial-gradient(circle, #1fa3ff, #003366);
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.moon-orbit {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.moon {
width: 10px;
height: 10px;
background: #ddd;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
使用CSS @keyframes 創建地球繞太陽的公轉效果：
@keyframes earth-orbit {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.earth-orbit {
animation: earth-orbit 36.5s linear infinite;
}
這里設置36.5秒完成一圈公轉（象征365天），使用linear保持勻速運動。
為地球添加繞自身軸旋轉的動畫：
@keyframes earth-rotation {
0% {
background-position: 0 0;
}
100% {
background-position: -60px 0;
}
}
.earth {
background-image: url('earth-texture.jpg');
background-size: 60px 30px;
animation: earth-rotation 3s linear infinite;
}
創建月球繞地球旋轉的動畫：
@keyframes moon-orbit {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.moon-orbit {
animation: moon-orbit 2.7s linear infinite;
}
設置2.7秒完成一圈公轉（象征27天月球公轉周期）。
使用box-shadow和filter屬性模擬光照效果：
.sun {
filter: drop-shadow(0 0 20px #f5b342);
}
.earth::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset -5px 0 10px rgba(0,0,0,0.7);
}
.moon::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset -2px 0 5px rgba(0,0,0,0.7);
}
添加媒體查詢使模型適應不同屏幕：
@media (max-width: 768px) {
.solar-system {
width: 300px;
height: 300px;
}
.earth-orbit {
width: 200px;
height: 200px;
}
.moon-orbit {
width: 40px;
height: 40px;
}
}
will-change屬性預通知瀏覽器元素將變化：.earth-orbit, .moon-orbit {
will-change: transform;
}
.earth, .moon {
transform: translateZ(0);
}
<!DOCTYPE html>
<html>
<head>
<style>
/* 此處插入上述所有CSS代碼 */
</style>
</head>
<body>
<!-- 插入HTML結構 -->
</body>
</html>
rotateX()實現黃道面傾斜.earth-orbit {
transform: translate(-50%, -50%) rotateX(60deg);
}
clip-path動態裁剪月球可見部分@keyframes moon-phase {
0% { clip-path: circle(50% at 100% 50%); }
50% { clip-path: circle(50% at 0% 50%); }
100% { clip-path: circle(50% at 100% 50%); }
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(1px 1px at 50px 100px, white, rgba(0,0,0,0)),
radial-gradient(1px 1px at 150px 250px, white, rgba(0,0,0,0));
background-size: 200px 200px;
}
通過本文的步驟，我們僅用CSS就實現了一個完整的地月公轉系統。這種技術可以應用于： - 教育類網站的天文演示 - 科幻主題網站的裝飾元素 - 加載動畫等交互場景
關鍵點在于： 1. 合理使用嵌套的transform屬性 2. 精確控制動畫時間和運動曲線 3. 層級結構的巧妙設計
嘗試調整參數（如軌道半徑、運動周期等）可以創建出不同的天文現象模擬效果。CSS動畫的可能性只受限于我們的想象力！
作者提示：本文代碼在Chrome、Firefox等現代瀏覽器中效果最佳，如需兼容舊版瀏覽器，可能需要添加-webkit前綴。 “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
