CSS小球跳動動畫，是一種非常流行的網(wǎng)頁動畫效果。當我們打開某些網(wǎng)站時，可能會看到一些小球在頁面上跳來跳去，給人以十分活潑、有趣的感覺。下面我們就來學習一下如何利用CSS實現(xiàn)這種動畫效果。

<code>.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
position: absolute;
animation: jump 1s ease-in-out infinite;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-200px);
}
100% {
transform: translateY(0);
}
}</code>

以上代碼中，我們首先創(chuàng)建了一個.ball類，給小球設(shè)置了一些基本樣式，例如寬高、背景顏色、邊框半徑等等。然后，我們利用CSS3動畫中的@keyframes來定義了一個名為jump的動畫。

在動畫定義中，我們設(shè)定了小球需要在1秒內(nèi)完成一次從當前位置向上200px的跳躍，并在跳躍過程中加入了一些緩動效果。通過將動畫設(shè)置為無限循環(huán)，我們就可以實現(xiàn)小球的不斷跳躍了。

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

最后，我們在HTML代碼中添加了一個名為container的父容器，用來限制小球的跳躍范圍。在該父容器中，我們添加了一個ball類的div元素，即為上面定義好的小球元素。

到此為止，我們已經(jīng)成功地實現(xiàn)了一個簡單的CSS小球跳動動畫效果。如果你想要嘗試一下不同的動畫效果，只需要更改@keyframes定義中的具體參數(shù)即可。希望這篇文章能夠?qū)δ阌兴鶐椭?/p>