CSS充電氣泡動畫是一種常見的網頁設計效果。這種動畫用于向用戶提示電池電量的變化，非常實用。以下是一些CSS代碼片段，可以幫助你制作漂亮的充電氣泡動畫。

/* 添加CSS樣式，初始化氣泡 */
.bubble {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
width: 20px;
height: 20px;
background-color: #fff;
border: 3px solid #444;
}

這段CSS代碼為充電氣泡添加一些基礎屬性，包括位置、大小、顏色和邊框。可以在HTML文件中添加一個div元素，然后在其中嵌入這段CSS代碼。在瀏覽器中查看效果，可以看到一個圓形的白色氣泡。

/* 添加CSS樣式，實現充電效果 */
@keyframes battery {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
10% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}
50% {
transform: translate(-50%, -50%) scale(0.9);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
}
.bubble.charge {
animation: battery 2s linear infinite;
}

這段CSS代碼是實現充電效果的核心代碼。通過關鍵幀動畫（keyframes）的方式，定義充電過程中氣泡的不同狀態。這段代碼將氣泡放大，然后縮小，最終逐漸消失。關鍵幀動畫完成后，將充電氣泡設置為無限循環，實現不斷充電的效果。

這段HTML代碼是嵌入充電氣泡的容器。在其中添加了之前定義好的CSS樣式，包括初始化氣泡和充電效果。可以在瀏覽器中查看效果，看到一個循環充電的白色氣泡。

CSS充電氣泡動畫是一個非常有趣的特效，可以為頁面增添不少亮點。通過上述代碼，你可以快速制作出一個簡單的充電氣泡，為你的設計增色不少！