CSS氣泡上升是一種常見的效果，可以幫助網頁設計者提升頁面的動態性，增加用戶的互動體驗。本文將為大家介紹CSS氣泡上升的基本實現方法。

.bubble {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background-color: #00bcd4;
border-radius: 50%;
animation: up 1s ease-out forwards;
}
@keyframes up {
from {
transform: translate(-50%, 0);
opacity: 1;
}
to {
transform: translate(-50%, -100%);
opacity: 0;
}
}

首先，在HTML文件中創建一個帶有.bubble類名的div元素，用于顯示氣泡。

<div class="bubble"></div>

接下來，使用CSS對氣泡進行設置。設置氣泡的位置為絕對定位，位于頁面的底部中央。設置氣泡的寬度和高度，以及背景色和圓角大小。添加動畫效果，使氣泡能夠向上移動，逐漸消失。

最后，使用@keyframes關鍵字定義動畫的具體實現方式。初始狀態為不透明，位于底部中央；結束狀態為透明，位于頂部中央。通過上述CSS代碼，即可實現氣泡上升的效果。