在Web開發(fā)中，CSS動(dòng)畫是一種非常有用的工具，可以讓網(wǎng)站更加生動(dòng)和吸引人。一種常見的CSS動(dòng)畫是繞軌道旋轉(zhuǎn)，本文將介紹如何實(shí)現(xiàn)這種動(dòng)畫效果。

/* 定義動(dòng)畫 */
@keyframes orbit {
from {
transform: rotate(0deg) translateX(200px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(200px) rotate(-360deg);
}
}
/* 設(shè)置樣式 */
#circle {
width: 100px;
height: 100px;
background-color: #ff9632;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: orbit 6s linear infinite;
}

以上代碼分為兩部分。首先，我們定義了一個(gè)名為orbit的動(dòng)畫，設(shè)定了從0度旋轉(zhuǎn)到360度旋轉(zhuǎn)的過程，在每一幀中都將圓形對(duì)象沿著由translateX函數(shù)定義的軌道移動(dòng)。

接下來，我們將定義一個(gè)圓形對(duì)象并為其應(yīng)用剛剛定義的orbit動(dòng)畫。該對(duì)象被定位在屏幕的正中心，通過transform: translate(-50%, -50%);屬性實(shí)現(xiàn)居中顯示的效果。最后，我們將動(dòng)畫時(shí)間設(shè)置為6秒，并將循環(huán)模式設(shè)置為無限次。這樣，我們的圓形對(duì)象就會(huì)不斷地繞軌道旋轉(zhuǎn)。