在網(wǎng)頁設(shè)計中，動態(tài)效果的運用可以讓頁面更加生動、鮮活。CSS的滾動效果可以給用戶帶來更加流暢的體驗，本文將介紹如何用CSS制作小球滾動效果。

.ball {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
animation: ballmove 2s linear infinite;
}
@keyframes ballmove {
0% {
top: 0;
left: 0;
}
50% {
top: 200px;
left: 300px;
}
100% {
top: 0;
left: 600px;
}
}

首先，給小球添加樣式，寬高為50px，背景色為紅色，使用絕對定位使其在頁面上方居中，設(shè)置圓角以達到制作小球的目的。接著，使用CSS3中的動畫特性，給小球添加一個名為ballmove的動畫，并設(shè)置2秒的運動時間，linear的運動方式，無限循環(huán)。

最后，在@keyframes中分別定義小球的運動狀態(tài)：0%狀態(tài)為初始狀態(tài)，top和left的值都為0；50%狀態(tài)時，小球的top值為200px，left值為300px，實現(xiàn)小球的“下落”效果；100%狀態(tài)時，小球的top值為0，left值為600px，實現(xiàn)小球的“反彈”效果。這樣，小球的滾動效果便誕生了。

以上便是使用CSS制作小球滾動效果的方法，通過簡單的CSS代碼，我們可以輕松實現(xiàn)流暢的滾動效果，為用戶帶來更好的體驗。