div+css实现墙角电池依靠充电动画效果代码-html代码-BFW代码库

div+css实现墙角电池依靠充电动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现墙角电池依靠充电动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
  
<style>
.battery {
  --br: 1vmin;
  --brc: #1f2020;
  box-sizing: border-box;
  position: relative;
  width: 20vmin;
  height: calc(50vmin + 2 * var(--br));
  border: var(--br) solid var(--brc);
  border-radius: 2vmin;
  top: 5vmin;
  --s: 10vmin;
  --c1:#FBF7F4;
  --c2:#5E9FA3;
  --n: 5;
  background: linear-gradient(var(--c1) calc(calc(var(--s)/2) * var(--n)), #0000 0), linear-gradient(var(--c2) calc(100% - 1.41vmin), #0000 0) 50% 0.71vmin/75% calc(var(--s)/2) repeat-y, radial-gradient(var(--c2) 50%, var(--c1) 52%) 0 0/calc(var(--s)/2 - var(--br)/2) calc(var(--s)/2);
  animation: bat-level 10s steps(12, jump-both) infinite alternate;
}
.battery:before {
  font-family: system-ui, sans-serif;
  font-size: 1.8vmin;
  line-height: 0.8;
  --h: 3.5vmin;
  box-sizing: border-box;
  --p: calc(10 * (10 - var(--n)));
  counter-reset: variable var(--p);
  content: counter(variable) "%";
  --clr: color-mix(in lab, var(--c2), #fff9 60%);
  color: var(--clr);
  text-align: center;
  position: absolute;
  width: 40%;
  left: 30%;
  height: var(--h);
  top: calc(-1 * var(--h));
  border: inherit;
  border-radius: 1vmin 1vmin 0 0;
  background-color: var(--brc);
}

@keyframes bat-level {
  0% {
    --n: 10;
    --c2: #E23636;
  }
  10% {
    --n: 9;
    --c2: #E23636;
  }
  20% {
    --n: 8;
    --c2: #E23636;
  }
  27% {
    --c2: #F3D060;
  }
  30% {
    --n: 7;
    --c2: #F3D060;
  }
  40% {
    --n: 6;
    --c2: #F3D060;
  }
  47% {
    --c2:#5E9FA3;
  }
  50%, 100% {
    --n: 5;
    --c2:#5E9FA3;
  }
  60% {
    --n: 4;
  }
  70% {
    --n: 3;
  }
  80% {
    --n: 2;
  }
  90% {
    --n: 1;
  }
  100% {
    --n: 0;
  }
}
/* fluff  the wall and the shadow*/
.noise {
  display: hidden;
}

.battery {
  transform-style: preserve-3d;
  transform: rotatex(20deg) rotatez(-2deg);
}
.battery:after {
  transform-style: preserve-3d;
  transform: translatez(-5px);
  content: "";
  position: absolute;
  width: 200%;
  height: 100%;
  ri.........完整代码请登录后点击上方下载按钮下载查看