CSS实现象形百分比展示

效果预览

准备一张原图，和一张滤色掉的图。代码可直接食用。

html

<div class="pic">
    <div id="pic_fill" class="pic_fill">
        <span id="label" class="label">0%</span>
    </div>
</div>
<input id="ipt" type="number">
<button id="btn">确定</button>

css

//底图
.pic{
    width:500px;
    height:550px;
    position: relative;
    background: url("./pic/girl2_.png") no-repeat left bottom;
    background-size: 300px;
    left: 0;
    bottom: 0;
}
//填充图
.pic_fill{
    width: 100%;
    background: url("./pic/girl2.png") no-repeat left bottom;
    background-size: 300px;
    position:absolute;
    left: 0;
    bottom: 0;
}
.label{
    width: 250px;
    height: 50px;
    border-bottom:2px solid #61deee;
    position: absolute;
    right: 0px;
    top:-52px;
    font-size: 42px;
    text-align: right;
    color: #61deee;
}

js

let picFill = document.getElementById('pic_fill')
let ipt = document.getElementById('ipt')
let btn = document.getElementById('btn')
let label = document.getElementById('label')

btn.onclick = function(){
    label.innerHTML = ipt.value + '%'
    picFill.style.height = ipt.value + '%'
    if(ipt.value > 90){
        label.style.top = 0
        label.style.borderTop="2px solid #61deee"
        label.style.borderBottom="none"
    }
}