CSS生成泡泡是一種很有趣的效果，可以用在網站設計中，讓頁面更加有趣、生動。接下來我們將介紹如何使用CSS生成泡泡。

/*首先，需要一個泡泡的外層容器*/
.bubble-wrap {
position: relative;
display: inline-block;
}
/*定義泡泡的樣式*/
.bubble {
position: absolute;
background-color: #00bfff;
border-radius: 50%;
}
/*定義泡泡尾巴的樣式*/
.bubble::before {
content: "";
position: absolute;
background-color: #00bfff;
transform: rotate(45deg);
}
/*定義泡泡尾巴的位置*/
.bubble.left::before {
left: -10px;
top: 24px;
width: 20px;
height: 20px;
}
/*定義泡泡尾巴的位置*/
.bubble.right::before {
right: -10px;
top: 24px;
width: 20px;
height: 20px;
}
/*定義不同大小的泡泡*/
.bubble.small {
width: 40px;
height: 40px;
}
.bubble.medium {
width: 60px;
height: 60px;
}
.bubble.large {
width: 80px;
height: 80px;
}
/*在HTML代碼中，需要添加以下代碼*/

使用以上代碼，就可以在網頁上生成三個不同大小的泡泡，是不是很有趣呢？當然，這只是一個簡單的例子，你可以使用CSS自由發揮，在頁面上添加更多的泡泡，讓你的網站更加生動有趣。