CSS動畫是Web開發(fā)中常用的技術之一，可以實現(xiàn)各種炫酷的效果。本文將介紹如何使用CSS動畫實現(xiàn)一個簡單而有趣的充電效果。

/* 定義基本樣式 */
.charging-container {
display: flex;
align-items: center;
justify-content: center;
margin: 50px auto;
}
.charging {
width: 100px;
height: 200px;
background-color: #293F4F;
border-radius: 5px;
overflow: hidden;
position: relative;
}
.charging::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom-color: #EA574B;
transform: translateX(-50%);
}
.charging::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
border-bottom-color: #F9C140;
transform: translateX(-50%);
}
.charging .battery {
width: 60px;
height: 140px;
background-color: #fff;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.charging .battery::before {
content: "";
position: absolute;
left: -10px;
bottom: 0;
width: 10px;
height: 20px;
background-color: #fff;
}
.charging .battery::after {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 10px;
height: 20px;
background-color: #fff;
}
.charging .battery .charge {
width: 60px;
height: 0;
background-color: #EA574B;
position: absolute;
bottom: 0;
left: 0;
transition: height 1s ease;
}
/* 定義動畫 */
@keyframes charge {
0% {
height: 0;
}
50% {
height: 100px;
}
100% {
height: 0;
}
}
/* 給charge類添加動畫 */
.charging .battery .charge {
animation: charge 2s linear infinite;
}

上述代碼中，我們首先定義了基本的HTML結構，并給元素添加了一些CSS樣式。接著，我們定義了一個名為“charge”的關鍵幀動畫，用于模擬充電的效果。最后，我們將該動畫應用于class為“charge”的元素上。這樣，在頁面中，當用戶看到充電器中的電池緩慢變化高度時，就可以形成一個炫酷的充電動畫效果。