CSS是超文本標(biāo)記語(yǔ)言（HTML）和JavaScript之外的語(yǔ)言，它可以讓網(wǎng)頁(yè)更加生動(dòng)有趣。在這篇文章中，我們將會(huì)學(xué)習(xí)如何使用CSS來(lái)寫一個(gè)移動(dòng)的小球效果。

.ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: red;
animation: moveBall 2s infinite;
}
@keyframes moveBall {
0% {
transform: translateX(0);
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(0);
}
}

首先我們需要?jiǎng)?chuàng)建一個(gè)小球的圓形。我們可以在CSS中使用border-radius屬性創(chuàng)建。其次，我們需要?jiǎng)?chuàng)建一個(gè)定義小球移動(dòng)的CSS動(dòng)畫(huà)。我們可以使用@keyframes規(guī)則指定小球的位置。在這個(gè)例子中，我們使用了transform:translateX(x)來(lái)移動(dòng)小球。最后，我們可以將動(dòng)畫(huà)應(yīng)用到小球上，為了讓小球一直移動(dòng)，我們可以將animation的infinite屬性設(shè)置為無(wú)限循環(huán)。

下面是HTML代碼：

<div class="ball"></div>

我們只需要在頁(yè)面中插入這個(gè)div元素，它的class屬性對(duì)應(yīng)CSS中的.ball樣式。現(xiàn)在，打開(kāi)瀏覽器，你將看到一個(gè)在網(wǎng)頁(yè)中移動(dòng)的小球。你可以通過(guò)修改CSS中的動(dòng)畫(huà)定義來(lái)改變小球的移動(dòng)路徑和移動(dòng)速度。