CSS動畫可以為網頁設計帶來不同尋常的效果，讓用戶的瀏覽體驗更加豐富和生動。其中一種常用的動畫效果就是氣泡縮放。下面我們來一起探討如何使用CSS來制作氣泡縮放動畫。

.bubble {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
animation: bubble 1s ease-in-out infinite;
}
@keyframes bubble {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.2);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}

以上代碼中，我們首先定義了一個氣泡的樣式，包括寬度、高度、圓角半徑、背景顏色和陰影效果等。接著，我們使用了CSS動畫的關鍵幀來定義氣泡的縮放效果。在關鍵幀中，我們分別定義了氣泡的初始狀態、中間狀態和結束狀態，并使用了transform屬性來實現縮放效果，同時使用opacity屬性來實現透明度的變化。最后，我們將動畫應用到了氣泡的樣式中，并設置了無限循環。

在使用氣泡縮放動畫時，我們可以將氣泡的樣式應用到需要添加動畫的元素上，比如按鈕、圖案或圖標等。通過不同的樣式設置和動畫時間設置，我們可以實現氣泡縮放動畫的多種變化效果，讓網頁設計更加生動和豐富。