CSS小球彈跳

小球彈跳是CSS動畫的基礎，掌握小球彈跳的實現方式可以幫助我們更好地理解CSS中的動畫原理。本文將通過一個簡單的例子來演示如何實現一個小球的彈跳效果。

HTML結構

我們需要在HTML文件中創建一個div元素，將其設置為圓形，并添加一個自定義類名，如下所示：

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

CSS樣式

接下來，我們需要在CSS文件中編寫一些基本的樣式規則來定義小球彈跳的外觀和運動方式，如下所示：

.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-25px);
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0% {
bottom: 0;
animation-timing-function: ease-in;
}
50% {
bottom: 300px;
animation-timing-function: ease-out;
}
100% {
bottom: 0;
animation-timing-function: ease-in;
}
}

解析

.ball類定義了小球的基本樣式，包括寬度、高度、圓角半徑、背景色、定位方式和動畫屬性。bottom和left屬性定義了小球在頁面中的位置。
@keyframes規則是定義動畫的關鍵幀規則，bounce是動畫的名稱。0%關鍵幀定義小球在最低點的位置，50%關鍵幀定義小球在超過最低點并到達最高點時的位置，100%關鍵幀定義小球回到最低點的位置。
animation-timing-function屬性定義了動畫的暫停和恢復速度。
在小球實現彈跳動畫中，我們將bottom屬性的值從0逐漸變化到300px，然后再變回0，實現了小球的彈跳效果。
最后，我們需要將小球的位置設置為底部中央，使小球在頁面中垂直居中。
至此，我們已經成功地實現了小球彈跳的效果。