CSS圓形軌跡動畫是一種常用的網頁動畫效果，能夠為網頁注入生動的氣息。下面我們就來介紹一下如何使用CSS代碼制作這個動畫效果。

/* 首先，我們需要定義一個圓形軌跡 */
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid #ccc;
position: relative;
}
/* 接下來，定義運動小球的樣式 */
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff0000;
position: absolute;
top: 50%; /* 將小球放置于圓形軌跡的上方中心位置 */
left: -25px; /* 小球的左側對齊圓形軌跡的起始位置 */
}
/* 最后，在運動小球的類中定義關鍵幀動畫 */
@keyframes move {
50% {
transform: translateX(200px) translateY(-100px); /* 移動到圓形軌跡的右側頂部位置 */
}
100% {
transform: translateX(0) translateY(0); /* 回到圓形軌跡的原始位置 */
}
}
.ball {
animation-name: move; /* 定義關鍵幀動畫名稱 */
animation-duration: 2s; /* 動畫持續時間為2秒 */
animation-timing-function: ease-in-out; /* 緩動函數為ease-in-out */
animation-iteration-count: infinite; /* 無限循環播放 */
}

以上代碼實現了在一個圓形軌跡上讓小球來回移動的效果，動畫運行時，小球將沿著圓形軌跡向右上方移動，并在達到軌跡的最高點后返回軌跡原點。這個動畫效果既簡單又生動，值得我們在網頁中廣泛應用。