行星公轉是我們研究宇宙的重要內容之一，通過CSS我們可以輕松實現行星公轉的動畫效果。

orbit {
position: absolute;
width: 200px;
height: 200px;
border-radius: 100%;
border: 2px solid #fff;
/* 太陽位置 */
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
animation: rotate 8s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.planet {
width: 50px;
height: 50px;
border-radius: 100%;
position: absolute;
/* 行星軌道半徑為50px */
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
/* 初始位置為橢圓的右焦點，偏離太陽75px */
transform-origin: 150px 50%;
animation: revolve 12s linear infinite;
}
/* 行星revolve動畫 */
@keyframes revolve {
from {
transform: rotate(0) translateX(150px) rotate(0);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}

上面的代碼中，我們定義了一個類名為orbit的元素作為太陽，使用border-radius將其邊框變為一個圓形，并通過動畫實現其自轉的效果。然后我們再定義一個類為planet的元素代表行星，使用transform-origin實現行星公轉橢圓軌跡的偏移量，并通過動畫實現其公轉的效果。

最后你只需要將以上樣式代碼應用到你的HTML標簽上，就可以實現一個簡單的行星公轉動畫。