# CSS如何實現電池加載效果
在現代網頁設計中,動態加載效果能顯著提升用戶體驗。本文將詳細介紹如何使用純CSS實現一個生動的電池加載動畫效果,包含完整的代碼示例和實現原理分析。
## 一、效果預覽
我們將創建一個包含以下元素的電池動畫:
- 電池外殼(帶圓角矩形)
- 電池正極(頂部小矩形)
- 動態填充的電量條
- 電量百分比文字顯示
- 充電狀態動畫

## 二、HTML結構
```html
<div class="battery-container">
<div class="battery">
<div class="battery-head"></div>
<div class="battery-body">
<div class="battery-level"></div>
<span class="battery-percent">0%</span>
</div>
</div>
</div>
首先設置電池的基本外觀樣式:
.battery-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f5f5f5;
}
.battery {
position: relative;
width: 120px;
height: 220px;
border: 4px solid #333;
border-radius: 10px;
background: white;
}
.battery-head {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 10px;
background: #333;
border-radius: 3px 3px 0 0;
}
.battery-body {
position: relative;
height: 100%;
overflow: hidden;
border-radius: 6px;
}
.battery-level {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0;
background: linear-gradient(to top, #4CAF50, #8BC34A);
transition: height 0.5s ease;
}
創建從0%到100%的充電動畫:
@keyframes charge {
0% { height: 0; background-color: #FF5722; }
20% { background-color: #FFC107; }
100% { height: 100%; background-color: #4CAF50; }
}
.charging .battery-level {
animation: charge 3s linear infinite;
}
.battery-percent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
color: #333;
z-index: 2;
}
.battery:hover {
box-shadow: 0 0 15px rgba(0,0,0,0.2);
transform: scale(1.05);
transition: all 0.3s ease;
}
當電量低于20%時顯示紅色警告:
.battery.low .battery-level {
background: linear-gradient(to top, #FF5722, #F44336);
}
.battery.low .battery-percent {
color: #fff;
text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
<style>
/* 此處插入上述所有CSS代碼 */
</style>
</head>
<body>
<div class="battery-container">
<div class="battery charging">
<div class="battery-head"></div>
<div class="battery-body">
<div class="battery-level"></div>
<span class="battery-percent">0%</span>
</div>
</div>
</div>
<script>
// 動態更新百分比
const level = document.querySelector('.battery-level');
const percent = document.querySelector('.battery-percent');
const battery = document.querySelector('.battery');
let p = 0;
const interval = setInterval(() => {
p = (p + 1) % 101;
level.style.height = p + '%';
percent.textContent = p + '%';
if(p < 20) {
battery.classList.add('low');
battery.classList.remove('charging');
} else {
battery.classList.remove('low');
battery.classList.add('charging');
}
if(p === 100) clearInterval(interval);
}, 50);
</script>
</body>
</html>
linear-gradient
創建電量條的色彩過渡@keyframes
定義動畫序列:hover
增強用戶體驗本方案兼容所有現代瀏覽器(Chrome/Firefox/Safari/Edge)。如需支持IE11,需要:
- 添加-ms-
前綴的漸變語法
- 使用JavaScript替代部分CSS動畫
will-change
屬性優化動畫性能:
.battery-level {
will-change: height, background-color;
}
通過以上步驟,我們實現了一個生動、交互性強的電池加載效果,完全使用CSS3特性,無需任何圖片資源。 “`
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。