hello i have a code for you to have a columns on music players like this picture
it has 2 colors ---- Red and Black
You Can change the defaults like colors or Height .
Animation Code
Columns CSS
Columns HTML
Note : You should put your "columns CSS" and "Animation" in the <style> Tag.
for better view put the HTML columns code on the bigger <div> tag with Specified "width" and "height" and "background-color".
it has 2 colors ---- Red and Black
You Can change the defaults like colors or Height .
Animation Code
Code:
@keyframes anim3 {
from {height:2px;}
to {height:120px;}
}
@keyframes anim2 {
from {height:2px;}
to {height:100px;}
}
Columns CSS
Code:
.d1 {animation-name:anim2;animation-duration:0.4s;animation-direction:alternate;animation-iteration-count:infinite;
width:40px;height:2px;background-color:black;position:absolute;top:5px;border-radius:6px;
left:2px;}
.d2 {animation-name:anim3;animation-duration:0.4s;animation-direction:alternate;animation-iteration-count:infinite;
width:40px;height:2px;background-color:red;position:absolute;top:5px;border-radius:6px;
left:46px;animation-delay:0.25s}
Columns HTML
Code:
<div style="position:absolute;width:268px;height:130px;background-color:rgba(179, 255, 230, 0.4);
left:1000px;top:500px;border-radius:8px;">
<div class="d1" style="absolute;"></div>
<div class="d2" style="absolute;"></div>
<div class="d1" style="absolute;left:90px;animation-delay:0.7s;"></div>
<div class="d2" style="absolute;left:135px;animation-delay:0.2s;"></div>
<div class="d1" style="absolute;left:180px;animation-delay:0.4s;"></div>
<div class="d2" style="absolute;left:225px;animation-delay:0.35s;"></div>
</div>
Note : You should put your "columns CSS" and "Animation" in the <style> Tag.
for better view put the HTML columns code on the bigger <div> tag with Specified "width" and "height" and "background-color".