<div class="warp">
<svg width="180" height="250" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m-706.445,255.64172l0.56913,0l0.17587,-0.38197l0.17587,0.38197l0.56913,0l-0.46044,0.23607l0.17588,0.38197l-0.46044,-0.23608l-0.46044,0.23608l0.17588,-0.38197l-0.46044,-0.23607z" stroke="#000" fill="#fff" />
<line fill="none" stroke="#000" stroke-width="1" x1="372" y1="242.5" x2="371" y2="242.5" />
<line stroke-linecap="undefined" stroke-linejoin="undefined" y2="322.5" x2="400" y1="322.5" x1="401" stroke="#000" fill="none" />
<path stroke="#000" d="m28,20.5c42.33334,0 84.66667,0 127,0l0,212.99999l-127,0l0,-212.99999z" opacity="undefined" fill="#ffffff" />
<path stroke-width="0" stroke="#000" d="m79,11.5l24,0l0,8l-24,0l0,-8z" opacity="undefined" fill="#8391AE" />
<path stroke="#000" stroke-width="0" d="m50.82292,51.00811l79.35417,0l0,0c10.39562,0 18.82292,6.26801 18.82292,14c0,7.73199 -8.42731,14 -18.82292,14l-79.35417,0l0,0c-10.39561,0 -18.82292,-6.26801 -18.82292,-14c0,-7.73199 8.42731,-14 18.82292,-14z" class="bms " />
<path stroke="#000" stroke-width="0" d="m50.82292,87.00811l79.35417,0l0,0c10.39562,0 18.82292,6.26801 18.82292,14c0,7.73199 -8.42731,14 -18.82292,14l-79.35417,0l0,0c-10.39561,0 -18.82292,-6.26801 -18.82292,-14c0,-7.73199 8.42731,-14 18.82292,-14z" class="bms" />
<path stroke="#000" stroke-width="0" d="m50.82292,125.00811l79.35417,0l0,0c10.39562,0 18.82292,6.26801 18.82292,14c0,7.73199 -8.42731,14 -18.82292,14l-79.35417,0l0,0c-10.39561,0 -18.82292,-6.26801 -18.82292,-14c0,-7.73199 8.42731,-14 18.82292,-14z" class="bms" />
<path stroke="#000" stroke-width="0" d="m51.71292,163.00811l79.35417,0l0,0c10.39562,0 18.82292,6.26802 18.82292,14c0,7.73198 -8.4273,14 -18.82292,14l-79.35417,0l0,0c-10.39561,0 -18.82292,-6.26801 -18.82292,-14c0,-7.73199 8.42731,-14 18.82292,-14z" class="bms" />
<path stroke="#000" stroke-width="0" d="m50.82292,201.00001l79.35417,0l0,0c10.39562,0 18.82292,6.26801 18.82292,14c0,7.73199 -8.42731,14 -18.82292,14l-79.35417,0l0,0c-10.39561,0 -18.82292,-6.26801 -18.82292,-14c0,-7.73199 8.42731,-14 18.82292,-14z" class="bms" />
</g>
</svg>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
body {
background: #c3f7f7;
}
.warp {
width: 600px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin: 30px auto;
background: #fff;
}
.bms {
fill: #efefef;
opacity: 0.5;
}
.charge {
animation-name: chargeimg-monolattice;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.charge-done {
fill: #4fef6c;
opacity: 1;
}
.dis-charge {
fill: #efefef;
opacity: 0.5;
}
/* 充电时单格跳动 */
@keyframes chargeimg-monolattice {
0% {
fill: #fff;
}
50% {
fill: #fff;
}
100% {
fill: #4fef6c;
}
}
JS
格式化
// percent 充电百分数
function chargeBms(percent) {
if (percent < 0) {
return
}
var bmsItems = document.getElementsByClassName('bms')
// 充满
if (percent > 100) {
for (let i = 0; i < bmsItems.length; i++) {
bmsItems[i].setAttribute('class', 'bms charge-done')
}
return
}
// 刚好满格 手动+1
if (percent % 20 === 0) {
percent = percent + 1
}
var disCharge = 100 - percent
var num = Math.floor(disCharge / 20)
bmsItems[num].setAttribute('class', 'bms charge')
for (let i = 0; i < bmsItems.length; i++) {
if (i < num) {
bmsItems[i].setAttribute('class', 'bms dis-charge')
}
if (i > num) {
bmsItems[i].setAttribute('class', 'bms charge-done')
}
}
}
window.onload = function() {
chargeBms(66)
}