css写一个根据值显示电量的电池

可以使用CSS中的伪元素和渐变来实现显示电量的电池效果，具体代码如下：

HTML代码：

<div class="battery" data-level="75"></div>

CSS代码：

.battery {
  position: relative;
  width: 50px;
  height: 30px;
  border: 2px solid #000;
  border-radius: 5px;
  overflow: hidden;
}

.battery:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  width: calc(100% * (var(--level) / 100));
  background: linear-gradient(to right, #0f0, #0f0 50%, #fff 50%, #fff);
  border-radius: 3px;
  transition: width 0.5s ease;
}

[data-level="25"] .battery:before {
  background: linear-gradient(to right, #f00, #f00 25%, #fff 25%, #fff);
}

[data-level="50"] .battery:before {
  background: linear-gradient(to right, #f00, #f00 50%, #fff 50%, #fff);
}

[data-level="75"] .battery:before {
  background: linear-gradient(to right, #f00, #f00 75%, #fff 75%, #fff);
}

其中，`data-level`属性表示电量百分比，可以设置25、50、75等不同的值来显示不同的电量。在CSS中，使用`var(--level)`来获取电量百分比并计算电池填充的宽度。通过设置不同的渐变色来实现电池填充的效果，并且使用过渡动画来实现电量变化时的平滑过渡。