CSS 球循環(huán)滾動(dòng)是一種炫酷的網(wǎng)頁(yè)動(dòng)效，在網(wǎng)頁(yè)設(shè)計(jì)中常常被運(yùn)用。其特點(diǎn)是頁(yè)面上一群彩色的球在不斷滾動(dòng)，并且軌跡循環(huán)，給人眼花繚亂的視覺效果。

/* HTML 代碼 */
<div class="container">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
/* CSS 代碼 */
.container {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
.ball {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
animation: roll 3s infinite;
}
@keyframes roll {
0% {
top: 0;
left: 0;
}
25% {
top: 0;
left: 180px;
}
50% {
top: 180px;
left: 180px;
}
75% {
top: 180px;
left: 0;
}
100% {
top: 0;
left: 0;
}
}

在代碼中，我們首先定義了容器 .container 和球 .ball 的樣式。接著，通過 CSS3 動(dòng)畫的 @keyframes 規(guī)則，定義了 .ball 的運(yùn)動(dòng)軌跡。這里考慮到球的速度和循環(huán)周期，所以動(dòng)畫持續(xù)時(shí)間為 3s，運(yùn)動(dòng)軌跡分別為起點(diǎn)、上方終點(diǎn)、右方終點(diǎn)、下方終點(diǎn)和回到起點(diǎn)。最后，通過 animation 屬性將動(dòng)畫綁定到 .ball 上，并設(shè)置為無限循環(huán)。

通過如上代碼，我們就可以輕松實(shí)現(xiàn) CSS 球循環(huán)滾動(dòng)的效果。如果需要增加更多球，只需要在容器 div 中增加相應(yīng)的 .ball 就可以了。