今天要介紹，如何使用 border-radius和 keyframes模擬氣泡從畫面頂部往下飄動並逐漸變大的效果

HTML

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

• .bubble-container : 是氣泡的容器，裡面包含了五個 .bubble 氣泡元素。每個 .bubble 元素都是獨立的，會在畫面中以不同的大小和速度移動，模擬氣泡從底部往上漂浮的視覺效果

CSS

a. 基本設定

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #1a1a1d;
    overflow: hidden /*隱藏滾動條*/
}

• display : 將內容居中對齊
• overflow : 防止氣泡超出畫面範圍時顯示滾動條

b. 容器與氣泡樣式

.bubble-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.bubble {
    position: absolute;
    top: -100px;
    width: 40px;
    height: 40px;
    background-color: #40A0FF;
    border-radius: 50%;
    animation: float 6s infinite ease-in-out;
}

• top : 從-100px 開始出現，模擬從畫面頂部外移動進來的效果
• border-radius : 使氣泡呈現圓形
• animation :

c. 不同氣泡樣式

.bubble:nth-child(1) {
    width: 50px;
    height: 50px;
    left: 20%;
    animation-duration: 8s;
}

.bubble:nth-child(2) {
    width: 30px;
    height: 30px;
    left: 40%;
    animation-duration: 6s;
}

.bubble:nth-child(3) {
    width: 60px;
    height: 60px;
    left: 60%;
    animation-duration: 10s;
}
    
.bubble:nth-child(4) {
    width: 40px;
    height: 40px;
    left: 80%;
    animation-duration: 7s;
}

.bubble:nth-child(5) {
    width: 35px;
    height: 35px;
    left: 50%;
    animation-duration: 9s;
}

• width、height、 left : 每個氣泡大小模式不同，所以根據其大小和位置做了個性化處理
  • left : 分散氣泡的位置，避免它們集中在同一位置
• animation-duration : 定義每個氣泡完成浮動動畫的時間長度，避免氣泡同時移動

d. 冒泡動畫

@keyframes float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) scale(1.5); /* 氣泡上升並逐漸變大 */
        opacity: 0; /* 氣泡逐漸消失 */
    }
}

• translateY(100vh) : 氣泡從容器的頂部向下移動整個視口高度
• scale(1.5) : 氣泡在移動過程中逐漸放大 1.5 倍，模擬氣泡上升的自然膨脹效果
• opacity: 0 : 氣泡在接近終點時逐漸消失

c. 結果呈現