如下圖，這種隨著電壓的變化而變化的效果怎么做呢？

![圖片上傳中...]

最后用的比較笨的方法解決,兩張圖片一樣大小的疊加上去,代碼如下:
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>