Pure CSS Batteries

index.html

<div class="cell battery__happy">
  <div class="battery">
    <div class="face"></div>
    <div class="acid"></div>
  </div>
</div>
<div class="cell battery__sad">
  <div class="battery">
    <div class="face"></div>
    <div class="acid"></div>
  </div>
</div>

Pure CSS Batteries.markdown

Pure CSS Batteries

Pure CSS Batteries

A Pen by Peter Butcher on CodePen.

License.

style.css

// Battery properties
$b-width:     130px;
$b-height:    250px;
$b-margin:    4px;
$b-full:      220px;
$b-empty:     50px;

// Colours
$c-happy:     #7FFF7F;
$c-sad:       #FF7F7F;

@mixin flex-defaults {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: $c-happy;
}

.cell {
  width: 100%;
  height: 100%;
  @include flex-defaults;
}

.battery__happy {
  background-color: $c-happy;

  .face {
    border-color: $c-happy;
    border-radius: 0px 0px 15px 15px;
    background-color: $c-happy;
    height: 10px;
    animation: anim-happy 1.5s infinite;

    &:before, &:after {
      background-color: $c-happy;
    }
  }

  .acid {
    height: $b-full;

    &:after {
      background-color: $c-happy;
    }
  }
}

.battery__sad {
  background-color: $c-sad;

  .face {
    border-color: #FFF transparent transparent transparent;
    border-radius: 50%;
    height: 30px;
    animation: anim-sad 5s infinite;

    &:before, &:after {
      animation-delay: 1.3s;
      background-color: #FFF;
    }
  }

  .acid {
    height: $b-empty;

    &:after {
      background-color: $c-sad;
    }
  }
}

.battery {
  position: relative;
  width: $b-width;
  height: $b-height;
  border: 4px solid #FFF;
  border-radius: 25px;
  margin: auto;

  &:after {
    position: absolute;
    top: -18px;
    left: 45px;
    width: 40px;
    height: 10px;
    background-color: #FFF;
    border-radius: 5px 5px 0px 0px;
    content: '';
  }
}

.face {
  z-index: 1;
  margin: 100px auto 0px auto;
  width: 30px;
  border-style: solid;
  border-width: 4px;
  position: relative;

  &:before, &:after {
    top: -20px;
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: blink 10s infinite;
  }

  &:before {
    right: 0px;
  }

  &:after {
    left: 0px;
  }
}

.acid {
  display: block;
  position: absolute;
  bottom: 0;
  width: calc(#{$b-width} - (2 * #{$b-margin}));
  background-color: #FFF;
  margin: $b-margin;
  border-radius: 0px 0px 18px 18px;

  &:before {
    position: absolute;
    top: -3px;
    left: -1px;
    width: 100px;
    height: 25px;
    background-color: #FFF;
    content: '';
    border-radius: 50%;
    transform: rotateZ(12deg);
  }

  &:after {
    position: absolute;
    top: -23px;
    right: -1px;
    width: 100px;
    height: 25px;
    content: '';
    border-radius: 50%;
    transform: rotateZ(12deg);
  }
}

@keyframes blink {
  0% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1, 1);
  }
  11% {
    transform: scale(1, .1);
  }
  12% {
    transform: scale(1, 1);
  }
  30% {
    transform: scale(1, 1);
  }
  31% {
    transform: scale(1, .1);
  }
  32% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(1, 1);
  }
  61% {
    transform: scale(1, .1);
  }
  62% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes anim-happy {
  0% {
    transform: rotateZ(-15deg);
  }
  50% {
    transform: rotateZ(15deg);
  }
  100% {
    transform: rotateZ(-15deg);
  }
}

@keyframes anim-sad {
  0% {
    transform: rotateZ(0deg);
  }
  49% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(0deg);
  }
  70% {
    transform: rotateZ(-10deg);
  }
  90% {
    transform: rotateZ(-10deg);
  }
  100% {
    transform: translateX(0deg);
  }
}