背景图需要是透明的才能有效果,其实就是利用的css,给一个盒子设置颜色,然后让它的宽度逐渐放大的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>车辆充电demo</title>
<style>
/* 背景充电动画效果 */
.charging-vehicle-wrap {
height: 127px;
margin-left: 10px;
width: 271px;
display: inline-block;
vertical-align: top;
}
.charging-vehicle-wrap .charging-vehicle {
width: 100%;
height: 104px;
position: relative;
margin-top: 8px;
}
.charging-vehicle-image {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 87px;
font-size: 36px;
text-align: center;
color: #2274c7;
/* 车辆充电背景图 */
background: url("../img/charger.png") no-repeat 50%;
background-size: cover;
}
.charging-progress {
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
height: 100%;
}
@keyframes animate-shine {
0% {
opacity: 0.4;
width: 0;
}
100% {
opacity: 1;
width: 100%;
}
}
.charging-progress:after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #4aaef8;
border-radius: 5px;
animation: animate-shine 2s ease-out infinite;
}
/* 背景充电动画效果end */
.charging-vehicle-wrap .charging-vehicle-power {
text-align: center;
line-height: 34px;
}
.charging-vehicle-wrap .charging-vehicle-power .key {
color: #8d9098;
margin-top: -5px;
}
.charging-vehicle-wrap .charging-vehicle-power {
text-align: center;
line-height: 34px;
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="charging-vehicle-wrap">
<div class="charging-vehicle">
<div class="charging-vehicle-image">50%</div>
<div class="charging-progress" style="width: 50%;"></div>
</div>
<div class="charging-vehicle-power">
<div style="font-size: 18px; font-weight: bold; margin-top: 10px;">180 kW•h</div>
<div class="key">已充电量</div>
</div>
</div>
<script>
let progress1 = document.getElementsByClassName('charging-progress')[0]
let progress2 = document.getElementsByClassName('charging-vehicle-image')[0]
console.log(progress1, progress2)
setTimeout(function () {
progress2.innerHTML = '90%'
progress1.style.width = '90%'
}, 3000)
</script>
</body>
</html>