CSS3是前端開發中一個很重要的技術，用到CSS3可以實現一些非常酷炫的效果。

今天我們來學習一下如何用CSS3實現泡泡飄動的效果，給網頁增加一些趣味性。

/* 定義泡泡的樣式 */
.bubble {
position: absolute;
top: -10px;
left: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
/* 定義泡泡飄動動畫 */
@keyframes move {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(30px, 50px) scale(1.2);
}
100% {
transform: translate(60px, 100px) scale(1);
}
}
/* 定義每個泡泡的動畫時間和延遲時間 */
.bubble:nth-child(1) {
animation: move 4s ease-in-out infinite;
animation-delay: 0s;
}
.bubble:nth-child(2) {
animation: move 4s ease-in-out infinite;
animation-delay: 1s;
}
.bubble:nth-child(3) {
animation: move 4s ease-in-out infinite;
animation-delay: 2s;
}
.bubble:nth-child(4) {
animation: move 4s ease-in-out infinite;
animation-delay: 3s;
}

以上代碼中，我們定義了泡泡的樣式和飄動動畫。使用了關鍵幀動畫@keyframes，通過不同的transform屬性值的變換來實現每個泡泡的移動軌跡。又通過nth-child偽類選擇器，分別對每個泡泡的動畫時間和延遲時間進行了設定，使得四個泡泡的飛舞節奏不一樣，更加有趣。

在HTML中，我們只需要添加四個泡泡元素，然后將它們添加到頁面中，就可以看到美妙的泡泡飄動效果啦！

細心的你也許會發現，泡泡雖然在飄動，但它一直保持著不變的形狀。如果想要讓泡泡在飄動的過程中，大小也有所改變，那么可以嘗試修改關鍵幀動畫中的scale屬性值，或者添加更多的關鍵幀到動畫中，進行更加靈活地調整。

好了，今天的CSS3實戰就到這里啦。有了這種趣味性的效果，網頁也能變得更加好玩有趣，趕緊試一試吧！