css3-battery-animation 动画

预览

标签

• fue-rotate 色相旋转；
• 波浪模拟；

代码

<style>
  html {
    background-color: rebeccapurple;
  }
  .battery {
    margin: 300px auto;
    width: 200px;
    height: 314px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 0 30px 0px rgba(0,0,0,.17);
  }
  .battery .head {
    display: inline-block;
    position: absolute;
    width: 48px;
    height: 24px;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 30px 0px rgba(0,0,0,.17);
  }
  .battery::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 100%;
    border-radius: 8px;
    background-image: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
    box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
    animation: move 10s ease-in-out infinite;
  }
  .mask {
    position: absolute;
    width: 100%;
    top: 0%;
    height: 100%;
    border-radius: 8px;
    background-color: #fff;
  }

  @keyframes move {
    0% {
      top:100%;
      height: 0%;
      filter: hue-rotate(90deg);
    }
    50% {
      box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
  }
    100% {
      top: 0%;
      height: 100%;
      filter: hue-rotate(0deg);
      box-shadow: 0 14px 30px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
    }
  }
  .g-wave {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: -50%;
    height: 100%;
    width: 100%;
    z-index: 1;
    transform: translateX(50%);
  }
  .wave {
    position: absolute;
    top: -20px;
    left: -50%;
    z-index: 1;
    width: 400px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.7);
    animation: moveWave 10s ease-in-out infinite;
  }
  div.wave:nth-of-type(1) {
    border-radius: 59% 45% 48% 50%;
    background-color: #fff;
  }
  div.wave:nth-of-type(2) {
    border-radius: 55% 45% 47% 55%;
  }
  div.wave:nth-of-type(3) {
    border-radius: 50% 50% 40% 55%;
  }
  @keyframes moveWave {
    100% {
      top: -370px;
      transform: rotate(720deg);
    }
  }
</style>
<template>
  <div class="battery">
    <div class="head"></div>
    <div class="mask"></div>
    <div class="g-wave">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
  </div>
</template>

源作者，代码请移步 github.com/chokcoco/iC…