CSS氣球效果是CSS動(dòng)畫(huà)中比較常見(jiàn)的一種。它可以讓元素呈現(xiàn)氣球的效果，讓網(wǎng)頁(yè)看起來(lái)更加生動(dòng)有趣。下面我們來(lái)一起學(xué)習(xí)如何實(shí)現(xiàn)CSS氣球效果。

/* 實(shí)現(xiàn)氣球的基本樣式 */
.ball {
position: relative;
width: 50px;
height: 80px;
background-color: red;
border-radius: 50% 50% 40% 40%;
}
/* 實(shí)現(xiàn)氣球的動(dòng)畫(huà)效果 */
.ball:hover {
animation: jump ease-in-out 0.5s alternate;
}
/* 定義氣球的跳躍動(dòng)畫(huà) */
@keyframes jump {
0% {
top: 0;
}
50% {
top: -30px;
}
100% {
top: 0;
}
}

首先，我們給氣球定義樣式，包括寬度、高度、背景顏色和邊框半徑等。接下來(lái)，我們定義氣球的跳躍動(dòng)畫(huà)，使用@keyframes關(guān)鍵字定義一系列關(guān)鍵幀，然后在.ball:hover偽類(lèi)中觸發(fā)這個(gè)動(dòng)畫(huà)。

最后，在HTML中將這個(gè)樣式應(yīng)用到一個(gè)