一些样式 ​

<template>
  <div class="awesome">
    <div class="container">
      <div class="battery"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  background: #e4e4e4;
}

.container {
  position: relative;
  width: 140px;
  margin: auto;
}

.battery {
  height: 220px;
  box-sizing: border-box;
  border-radius: 15px 15px 5px 5px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
  background: #fff;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 10px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -10px);
    border-radius: 5px 5px 0 0;
    background: rgba(240, 240, 240, 0.88);
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 90%;
    background: linear-gradient(
      to bottom,
      #7abcff 0%,
      #00bcd4 44%,
      #2196f3 100%
    );
    border-radius: 0px 0px 5px 5px;
    box-shadow:
      0 14px 28px rgba(33, 150, 243, 0),
      0 10px 10px rgba(9, 188, 215, 0.08);
    animation: charging 6s linear infinite;
    filter: hue-rotate(90deg);
  }
}

@keyframes charging {
  50% {
    box-shadow:
      0 14px 28px rgba(0, 150, 136, 0.83),
      0px 4px 10px rgba(9, 188, 215, 0.4);
  }

  95% {
    top: 5%;
    filter: hue-rotate(0deg);
    border-radius: 0 0 5px 5px;
    box-shadow:
      0 14px 28px rgba(4, 188, 213, 0.2),
      0 10px 10px rgba(9, 188, 215, 0.08);
  }
  100% {
    top: 0%;
    filter: hue-rotate(0deg);
    border-radius: 15px 15px 5px 5px;
    box-shadow:
      0 14px 28px rgba(4, 188, 213, 0),
      0 10px 10px rgba(9, 188, 215, 0.4);
  }
}
</style>

<template>
  <div class="awesome">
    <div class="container">
      <div class="battery"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
  display: flex;
  background: #e4e4e4;
}

.container {
  position: relative;
  width: 140px;
  margin: auto;
}

.battery {
  height: 220px;
  box-sizing: border-box;
  border-radius: 15px 15px 5px 5px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.22));
  background: #fff;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 10px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -10px);
    border-radius: 5px 5px 0 0;
    background: rgba(240, 240, 240, 0.88);
  }

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 90%;
    background: linear-gradient(
      to bottom,
      #7abcff 0%,
      #00bcd4 44%,
      #2196f3 100%
    );
    border-radius: 0px 0px 5px 5px;
    box-shadow:
      0 14px 28px rgba(33, 150, 243, 0),
      0 10px 10px rgba(9, 188, 215, 0.08);
    animation: charging 6s linear infinite;
    filter: hue-rotate(90deg);
  }
}

@keyframes charging {
  50% {
    box-shadow:
      0 14px 28px rgba(0, 150, 136, 0.83),
      0px 4px 10px rgba(9, 188, 215, 0.4);
  }

  95% {
    top: 5%;
    filter: hue-rotate(0deg);
    border-radius: 0 0 5px 5px;
    box-shadow:
      0 14px 28px rgba(4, 188, 213, 0.2),
      0 10px 10px rgba(9, 188, 215, 0.08);
  }
  100% {
    top: 0%;
    filter: hue-rotate(0deg);
    border-radius: 15px 15px 5px 5px;
    box-shadow:
      0 14px 28px rgba(4, 188, 213, 0),
      0 10px 10px rgba(9, 188, 215, 0.4);
  }
}
</style>