一、需要用到的知识

filter: hue-rotate(90deg)
hue-rotate() 函数在输入图像上应用色相旋转。`angle` 一值设定图像会被调整的色环角度值。值
为 `0deg`，则图像无变化。若值未设置值，默认为 `0deg`。该值虽然没有最大值，超过 `360deg` 的值相当于
又绕一圈。

二、布局

  <div class="container">
    <div class="header"></div>//电池头部
    <div class="electricity">//电池主体
    </div>
    <div class="electricity-copy">//电量
      <p></p>//充电需要的动画
      <p></p>
      <p></p>
    </div>
  </div>

三、样式

 .container {
  width: 120px;
  margin: 120px auto;
  position: relative;
  height: 200px;
}

.header{
  position: absolute;
  top: 0;
  left: 50%;
  height: 20px;
  border-radius: 5px;
  width: 15px;
  transform: translate(-50%,-18px);
  background-color: #fff;
}

.container .electricity {
  width: 120px;
  height: 200px;
  border-radius: 5px;
  background-color: #fff;
}

.container .electricity::before {
  content: '';
  background-image: linear-gradient(to top, rgb(64, 189, 247), rgb(99, 247, 247));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  animation: change 10s infinite;
  border-radius: 5px;
}

.electricity-copy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
}

p {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, .8);
  border-radius: 45% 47% 44% 42%;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  animation: move 10s linear infinite;
}

p:nth-child(2) {
  transform: translate(-50%, 0);
  border-radius: 55% 57% 55% 52%;
}

p:nth-child(3) {
  transform: translate(-50%, 0);
  border-radius: 65% 67% 66% 62%;
}


@keyframes change {
  0% {
    top: 200px;
    filter: hue-rotate(45deg);
  }

  100% {
    top: 0;
    filter: hue-rotate(90deg);
  }
}

四、效果展示