Last Updated: February 25, 2016
·
2.626K
· html5web

Fire equalizer - PURE CSS

DEMO: http://codepen.io/html5web/pen/spbGi Picture

body{
  background: #000;
  width: 360px;
  padding: 20px;
  margin: 0 auto;
}

.equalizer{
  width: 100%;
  height: 200px;
  transform: rotate(180deg);
  -webkit-box-reflect: above 1px -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0)));
}

.parts{
  background: linear-gradient(orange 35%, red 50%, black 95%);
  width: 15px;
  height: 0;
  display: inline;
  float: left;
  margin-right: 2px;
  animation: play 1s infinite ease-out;
 }

.parts:nth-child(2){
    animation: play 2s infinite ease-out;
}

.parts:nth-child(3){
    animation: play 4s infinite ease-out;
}

.parts:nth-child(4){
    animation: play 1s infinite ease-out;
}

.parts:nth-child(5){
    animation: play 5s infinite ease-out;
}

.parts:nth-child(6){
    animation: play 4s infinite ease-out;
}

.parts:nth-child(7){
    animation: play 2s infinite ease-out;
}

.parts:nth-child(8){
    animation: play 4s infinite ease-out;
}

.parts:nth-child(9){
    animation: play 1s infinite ease-out;
}

.parts:nth-child(10){
    animation: play 5s infinite ease-out;
}

.parts:nth-child(11){
    animation: play 4s infinite ease-out;
}

.parts:nth-child(12){
    animation: play 2s infinite ease-out;
}

.parts:nth-child(13){
    animation: play 4s infinite ease-out;
}

.parts:nth-child(14){
    animation: play 1s infinite ease-out;
}

.parts:nth-child(15){
    animation: play 5s infinite ease-out;
}

@keyframes play{
  from{height: 0%;}
  to{height: 99%;}
}

3 Responses
Add your response

You should fix the picture link and indent the source with 4 spaces to enable code highlight!

over 1 year ago ·

Thanks for help to fix!

over 1 year ago ·

@timpietrusky @html5web there is a shortcut for indenting code by 4 spaces to enable highlighting: you can select your code segment and press tab, it will automatically add 4 spaces in front of every line in the block

over 1 year ago ·