三角形氣泡是網頁設計中經常用到的元素之一。我們可以使用CSS來輕松繪制出漂亮的三角形氣泡。此外，通過添加一些特殊樣式和動畫效果，可以讓我們的頁面更加生動有趣。

// 代碼如下：
.popover {
position: relative;
background-color: #FFFFFF;
border-radius: 6px;
border: 1px solid #ddd;
padding: 10px;
margin-top: 20px;
}
/* 三角形 */
.popover:before {
content: "";
position: absolute;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #FFFFFF transparent;
top: -20px;
left: 50%;
margin-left: -10px;
}
/* 動畫效果 */
.popover:hover:before {
animation: fade-in 0.5s ease;
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}

使用以上代碼，我們創建了一個包含一個白色背景、圓角的氣泡和一個向下的三角形的自定義彈出框。當鼠標懸停在氣泡上時，三角形會伴隨淡入動畫效果而出現。這是一個簡單但實用的CSS技巧，可以使我們的網站更具吸引力。