开关电源-交流220V降压电路-电阻电容降压原理

效果图

页面布局

<div class="zb">
          <span class="zb-l" style="width: 43.5%">43.5%</span>
          <span class="zb-r">56.5%</span>
</div>

样式代码

.zb {
        display: flex;
        position: relative;
        width: 232px;
        // background: linear-gradient(
        //   90deg,
        //   rgba(226, 98, 109, 0.1) 0%,
        //   rgba(226, 98, 109, 0.2) 90%
        // );
        // background:linear-gradient(to right, #ff000000, #d32f2f80 90%, #d32f2f80);
        .zb-bg {
          position: absolute;
          transition: all 0.3s linear 0s;
          height: 100%;
          background: linear-gradient(
            90deg,
            rgba(14, 203, 129, 0.2) 0%,
            rgba(14, 203, 129, 0.1) 90%
          );
          // background:linear-gradient(to left, #5dc78721, #5dc7878c 50%, #5dc787);
        }
        span {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 116px;
          height: 36px;
        }
        .zb-l {
          background: linear-gradient(
            90deg,
            rgba(14, 203, 129, 0.2) 0%,
            rgba(14, 203, 129, 0.1) 90%
          );
        }
        .zb-r {
          flex: 1;
          background: linear-gradient(
            90deg,
            rgba(226, 98, 109, 0.1) 0%,
            rgba(226, 98, 109, 0.2) 90%
          );
        }
      }