CSS氣球效果是CSS動畫中比較常見的一種。它可以讓元素呈現氣球的效果，讓網頁看起來更加生動有趣。下面我們來一起學習如何實現CSS氣球效果。

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

首先，我們給氣球定義樣式，包括寬度、高度、背景顏色和邊框半徑等。接下來，我們定義氣球的跳躍動畫，使用@keyframes關鍵字定義一系列關鍵幀，然后在.ball:hover偽類中觸發這個動畫。

最后，在HTML中將這個樣式應用到一個