Fire equalizer - PURE CSS
DEMO: http://codepen.io/html5web/pen/spbGi
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%;}
}
Written by Azik Samarkandiy
Related protips
3 Responses
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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#