在網頁設計中，CSS 動畫可以增加頁面的吸引力和互動性。其中，泡泡飄動動畫是一個非常受歡迎的設計效果，它可以讓頁面看起來更加生動、輕松和有趣。通過 CSS 的簡單設置，我們可以輕松實現泡泡的飄動效果。

/* 定義泡泡的樣式 */
.bubble {
position: absolute;
z-index: 1;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ffffff;
}
/* 定義泡泡的動畫 */
@keyframes bubble-animation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
/* 定義泡泡的運動效果 */
.bubble-animation {
animation: bubble-animation 1s ease-in-out infinite;
}

在代碼中，我們首先定義了泡泡的樣式和動畫效果。泡泡的樣式包括寬度、高度、邊框圓角和背景顏色等屬性。接著，我們通過 @keyframes 規則定義了泡泡的運動軌跡。泡泡會在 0% 的時候不偏移，50% 的時候向上偏移 30px，100% 的時候返回到原來的位置。最后，我們通過 .bubble-animation 類將泡泡的動畫效果應用到泡泡元素上，使得泡泡在頁面上隨機飄動。

以上代碼只是泡泡飄動動畫的一種簡單實現方式，并不是唯一的方式。我們可以根據實際的需求和創意進行修改和優化，讓頁面的泡泡飄動效果更加生動、炫酷和具有個性。相信通過運用不同的 CSS 技巧和創意，我們可以打造出更加酷炫的頁面效果，讓用戶享受到更好的瀏覽體驗。