CSS电池动画效果（每日一个前端动画，附代码）

效果预览

HTML代码

<!-- 动态电池特效动画 -->
  <div class="body">
  <!-- 整体容器 -->
  <div class="container">
    <!-- 电池突出电极 -->
    <div class="header"></div>
    <!-- 电池容器 -->
    <div class="battery">
    </div>
    <!-- 复制的电池容器 -->
    <div class="battery-copy">
      <!-- 波浪效果 -->
        <div class="g-wave"></div>
        <div class="g-wave"></div>
        <div class="g-wave"></div>
    </div>
</div>
</div>

CSS代码

/* 整体背景样式 */
.body {
    position: absolute;
    width: 100%;
    height: 100%;