Loading

CSS3 Equaliser

I've always liked the old LED equalisers that seemed to be standard on every cheap hi-fi in the 90s (although, I'll confess that I don't understand what they mean!).

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS3 Equaliser</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
html,
body {
  background: #212121;
}
.equaliser-container {
  min-height: 100%;
  max-width: 160px;
  margin: 0 auto;
  padding: 80px 0 0 0;
  position: relative;
  zoom: 1;
  box-reflect: below 0px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.1) 100%);
}
.equaliser-container:before,
.equaliser-container:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.equaliser-container:after {
  clear: both;
}
.colour-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background: #AEED25;
}
.equaliser-column {
  width: 20px;
  float: left;
  margin: 0 6px;
  padding: 0;
  height: 180px;
  position: relative;
  list-style-type: none;
  background: #151515;
}
.equaliser-column:nth-child(1) .colour-bar {
  animation: color-bar 2s 1s ease-out alternate infinite;
}
.equaliser-column:nth-child(2) .colour-bar {
  animation: color-bar 2s 0.5s ease-out alternate infinite;
}
.equaliser-column:nth-child(3) .colour-bar {
  animation: color-bar 2s 1.5s ease-out alternate infinite;
}
.equaliser-column:nth-child(4) .colour-bar {
  animation: color-bar 2s 0.25s ease-out alternate infinite;
}
.equaliser-column:nth-child(5) .colour-bar {
  animation: color-bar 2s 2s ease-out alternate infinite;
}
.led-mask {
  display: block;
  margin: 0;
  position: relative;
}
.led-mask:nth-child(even) {
  background: #212121;
  height: 6px;
}
.led-mask:nth-child(odd) {
  height: 12px;
  background: transparent;
  box-shadow: 0 0 1px #000000, inset 0 0 8px rgba(0, 0, 0, 0.9);
}
@keyframes color-bar {
  0% {
    height: 18px;
    background: #AEED25;
  }
  10% {
    height: 90px;
    background: #AEED25;
  }
  20% {
    height: 54px;
    background: #AEED25;
  }
  30% {
    height: 126px;
    background: #AEED25;
  }
  40% {
    height: 162px;
    background: #AEED25;
  }
  50% {
    height: 54px;
    background: #AEED25;
  }
  60% {
    height: 144px;
    background: #AEED25;
  }
  70% {
    height: 90px;
    background: #AEED25;
  }
  80% {
    height: 126px;
    background: #AEED25;
  }
  90% {
    height: 36px;
    background: #AEED25;
  }
  100% {
    height: 18px;
    background: #AEED25;
  }
}
/*input[type="checkbox"]#track-control {
	~ equaliser-container .colour-bar {
      animation:paused;
    }
  &:checked {
    ~ equaliser-container .colour-bar {
      animation:running;
    }
  }
}*/
/* background: -webkit-linear-gradient(top, #f70c0c 0%,#f70c0c 18px,#a2d822 18px,#a2d822 100%); */

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <!--div class="controls">
  <label for="track-control">Track</label>
  <input type="checkbox" id="track-control" checked-->
  <div class="equaliser-container">
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
    <ol class="equaliser-column">
      <li class="colour-bar"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
      <li class="led-mask"></li>
    </ol>
  </div>
<!--/div-->
  
    <script src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.clearfix:after {
  clear: both;
}
html,
body {
  background: #212121;
}
.equaliser-container {
  min-height: 100%;
  max-width: 160px;
  margin: 0 auto;
  padding: 80px 0 0 0;
  position: relative;
  zoom: 1;
  box-reflect: below 0px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.1) 100%);
}
.equaliser-container:before,
.equaliser-container:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
}
.equaliser-container:after {
  clear: both;
}
.colour-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  background: #AEED25;
}
.equaliser-column {
  width: 20px;
  float: left;
  margin: 0 6px;
  padding: 0;
  height: 180px;
  position: relative;
  list-style-type: none;
  background: #151515;
}
.equaliser-column:nth-child(1) .colour-bar {
  animation: color-bar 2s 1s ease-out alternate infinite;
}
.equaliser-column:nth-child(2) .colour-bar {
  animation: color-bar 2s 0.5s ease-out alternate infinite;
}
.equaliser-column:nth-child(3) .colour-bar {
  animation: color-bar 2s 1.5s ease-out alternate infinite;
}
.equaliser-column:nth-child(4) .colour-bar {
  animation: color-bar 2s 0.25s ease-out alternate infinite;
}
.equaliser-column:nth-child(5) .colour-bar {
  animation: color-bar 2s 2s ease-out alternate infinite;
}
.led-mask {
  display: block;
  margin: 0;
  position: relative;
}
.led-mask:nth-child(even) {
  background: #212121;
  height: 6px;
}
.led-mask:nth-child(odd) {
  height: 12px;
  background: transparent;
  box-shadow: 0 0 1px #000000, inset 0 0 8px rgba(0, 0, 0, 0.9);
}
@keyframes color-bar {
  0% {
    height: 18px;
    background: #AEED25;
  }
  10% {
    height: 90px;
    background: #AEED25;
  }
  20% {
    height: 54px;
    background: #AEED25;
  }
  30% {
    height: 126px;
    background: #AEED25;
  }
  40% {
    height: 162px;
    background: #AEED25;
  }
  50% {
    height: 54px;
    background: #AEED25;
  }
  60% {
    height: 144px;
    background: #AEED25;
  }
  70% {
    height: 90px;
    background: #AEED25;
  }
  80% {
    height: 126px;
    background: #AEED25;
  }
  90% {
    height: 36px;
    background: #AEED25;
  }
  100% {
    height: 18px;
    background: #AEED25;
  }
}
/*input[type="checkbox"]#track-control {
	~ equaliser-container .colour-bar {
      animation:paused;
    }
  &:checked {
    ~ equaliser-container .colour-bar {
      animation:running;
    }
  }
}*/
/* background: -webkit-linear-gradient(top, #f70c0c 0%,#f70c0c 18px,#a2d822 18px,#a2d822 100%); */
/* Downloaded from https://ahoj.co.uk/ */
/* Yep. Still no Javascript. */

This awesome code is write by Chris Mounsey, you can se more from this user in the personal repository