CSS3 氣泡爆破是一種通過 CSS3 技術(shù)實(shí)現(xiàn)動(dòng)態(tài)效果的方式，它能夠?yàn)槲谋緝?nèi)容、圖像或按鈕等添加一個(gè)帶有爆破效果的氣泡動(dòng)畫。

.bubble {
position: relative;
display: inline-block;
cursor: pointer;
}
.bubble:hover:after {
content: "";
position: absolute;
left: 50%;
bottom: -20px;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
transform: translateX(-50%);
animation: bubble-pop 1s ease-out forwards;
}
@keyframes bubble-pop {
0% {transform: translateX(-50%) scale(1);}
80% {transform: translateX(-50%) scale(1.5);}
100% {transform: translateX(-50%) scale(0);}
}

我們首先需要定義一個(gè)氣泡容器，將其設(shè)置為相對(duì)定位（position: relative），并為其添加一個(gè)指針（cursor: pointer）。然后，我們使用偽類選擇器 :hover 實(shí)現(xiàn)氣泡形態(tài)的出現(xiàn)效果。

.bubble:hover:after {
content: "";
position: absolute;
left: 50%;
bottom: -20px;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
transform: translateX(-50%);
animation: bubble-pop 1s ease-out forwards;
}

我們使用 CSS 偽元素 :after，在氣泡容器的底部添加氣泡圖像，并將其設(shè)置為絕對(duì)定位（position: absolute）。我們定位氣泡圖像的水平居中位置（left: 50%），使其與容器水平居中對(duì)齊，并設(shè)置其底部距離容器底部為 -20px，使其偏移出容器底部。然后，我們?yōu)闅馀輬D像設(shè)置了邊框半徑（border-radius），使其變?yōu)閳A形。

@keyframes bubble-pop {
0% {transform: translateX(-50%) scale(1);}
80% {transform: translateX(-50%) scale(1.5);}
100% {transform: translateX(-50%) scale(0);}
}

接著，我們定義了一個(gè)名為 bubble-pop 的動(dòng)畫，它包含三個(gè)關(guān)鍵幀。我們首先將氣泡圖像設(shè)置為原始比例（transform: translateX(-50%) scale(1)），然后在動(dòng)畫的 80% 處將其縮放為 1.5 倍大小（scale(1.5)）。最后，在動(dòng)畫的最后一幀（100%）我們將氣泡圖像縮放到 0，使其看起來像是破裂了。