隨著html5和CSS3的不斷發展，氣泡上升效果已經不再是一個難以實現的功能了。下面我們將帶您了解如何在CSS中實現氣泡上升效果。

.bubble {
position: absolute; /*將氣泡元素設為絕對定位*/
bottom: -30px; /*設定氣泡的bottom值為-30px*/
border-radius: 50%; /*設定氣泡為圓形*/
width: 60px;
height: 60px;
background-color: #FFF;
box-shadow: 0px 0px 5px rgba(0,0,0,0.5); /*為氣泡添加陰影*/
animation: bubble 1.5s ease-out infinite; /*使用CSS3的動畫屬性讓氣泡產生上升效果*/
}
@keyframes bubble {
0% { /*在第0%的時間點，氣泡位于bottom: -30px的位置*/
bottom: -30px;
transform: scale(1); /*不變化*/
}
50% { /*在第50%的時間點，氣泡位于bottom: 200px的位置并且變為透明的*/
bottom: 200px;
opacity: 0;
transform: scale(0.6); /*縮小*/
}
100% { /*在第100%的時間點，氣泡回到初始狀態*/
bottom: 500px;
opacity: 0;
transform: scale(0.4); /*縮小*/
}
}

在上述代碼中，我們使用了CSS3的animation屬性創建了一個名為bubble的動畫。在動畫中，氣泡會從bottom: -30px的位置開始快速上升，到達bottom: 200px的位置后，透明度漸漸變為0并縮小0.6倍，最后在bottom: 500px的位置消失。通過調節animation屬性及@keyframes中不同時間點的CSS屬性，您可以自由地變換氣泡上升的速度、高度、縮放等樣式。