as shown in the figure below, what about the effect that changes with the voltage?
! [picture upload.]
finally, the stupid method is used to solve the problem. The two images are superimposed with the same size, and the code is as follows:
css:
.circleBox {
width: 3.96rem;
position: relative;
left: 50%;
transform: translateX(-50%);
min-height: 3.16rem;
}
.circle {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 3.16rem;
background: url(../../image/bight1.png) no-repeat;
background-size: cover;
}
.circle.on {
background: url(../../image/bight2.png) no-repeat;
width: 50%;
background-size: cover;
}html:
<div class="circleBox">
<span class="circle"></span>
<span class="circle on"></span>
</div>