CSS是現代網頁設計中不可或缺的技術之一，可以讓網頁呈現出豐富多彩的效果。本文將介紹如何通過CSS制作太陽動畫，讓你的網頁更加生動有趣。

.sun {
width: 200px;
height: 200px;
background-color: #ffbf00;
border-radius: 50%;
position: relative;
animation: rotation 10s linear infinite;
}
.sun:before {
content: "";
display: block;
position: absolute;
width: 60px;
height: 60px;
background-color: #fff;
top: 20px;
left: 70px;
border-radius: 50%;
}
.sun:after {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
background-color: #ffbf00;
top: 80px;
left: 80px;
border-radius: 50%;
animation: orbit 2s linear infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes orbit {
from {
transform: translateX(0) translateY(-100px);
}
to {
transform: translateX(100px) translateY(0);
}
}

以上代碼中，我們定義了一個類名為.sun的元素，設置它的背景顏色為黃色，圓角為50%，并使用了position:relative屬性讓它相對定位。同時還定義了兩個偽元素:before和:after，分別表示太陽和軌道上的星星。然后通過animation屬性分別為.sun和.after屬性設置了動畫效果，讓太陽可以旋轉，星星可以繞太陽轉。

趕緊把這段代碼嵌入到你的網頁中試試，讓你的網頁變得更加生動有趣吧！