console
<div class="music active">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
* {
margin:0;
padding:0;
}
body {
background-color:#ffffff
}
.music {
width:100%px;
height:1px;
margin:100px auto;
position:relative;
}
.music i {
width:12px;
height:8px;
position:absolute;
bottom:0;
background-color:#ffffff;
}
.music i:nth-of-type(1) {
left:20px;
}
.music i:nth-of-type(2) {
left:40px;
}
.music i:nth-of-type(3) {
left:60px;
}
.music i:nth-of-type(4) {
left:80px;
}
.music i:nth-of-type(5) {
left:100px;
}
.music i:nth-of-type(6) {
left:120px;
}
.music i:nth-of-type(7) {
left:140PX;
}
.music i:nth-of-type(8) {
left:160px;
}
.music i:nth-of-type(9) {
left:180px;
}
.music i:nth-of-type(10) {
left:200px;
}
.music i:nth-of-type(11) {
left:220px;
}
.music i:nth-of-type(12) {
left:240px;
}
.music i:nth-of-type(13) {
left:260px;
}
.music i:nth-of-type(14) {
left:280px;
}
.music i:nth-of-type(15) {
left:300px;
}
.music i:nth-of-type(16) {
left:320px;
}
.music i:nth-of-type(17) {
left:340px;
}
.music i:nth-of-type(18) {
left:360px;
}
.music i:nth-of-type(19) {
left:380PX;
}
.music i:nth-of-type(20) {
left:400px;
}
.music i:nth-of-type(21) {
left:420px;
}
.music i:nth-of-type(22) {
left:440px;
}
.music i:nth-of-type(23) {
left:460px;
}
.music i:nth-of-type(24) {
left:480px;
}
.music i:nth-of-type(25) {
left:500px;
}
.music i:nth-of-type(26) {
left:520px;
}
.music i:nth-of-type(27) {
left:540px;
}
.music i:nth-of-type(28) {
left:560px;
}
.music i:nth-of-type(29) {
left:580px;
}
.music i:nth-of-type(30) {
left:600px;
}
.music i:nth-of-type(31) {
left:620PX;
}
.music i:nth-of-type(32) {
left:640px;
}
.music i:nth-of-type(33) {
left:660px;
}
.music i:nth-of-type(34) {
left:680px;
}
.music i:nth-of-type(35) {
left:700px;
}
.music i:nth-of-type(36) {
left:720px;
}
.music i:nth-of-type(37) {
left:740px;
}
.music i:nth-of-type(38) {
left:760px;
}
.music i:nth-of-type(39) {
left:780px;
}
.music i:nth-of-type(40) {
left:800px;
}
.music i:nth-of-type(41) {
left:820px;
}
.music i:nth-of-type(42) {
left:840px;
}
.music i:nth-of-type(43) {
left:860PX;
}
.music i:nth-of-type(44) {
left:880px;
}
.music i:nth-of-type(45) {
left:900px;
}
.music i:nth-of-type(46) {
left:920px;
}
.music i:nth-of-type(47) {
left:940px;
}
.music i:nth-of-type(48) {
left:960px;
}
.music.active i:nth-of-type(1) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#fdeff2;
}
.music.active i:nth-of-type(2) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#e4d2d8;
}
.music.active i:nth-of-type(3) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#f6bfbc;
}
.music.active i:nth-of-type(4) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#f5b199;
}
.music.active i:nth-of-type(5) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#f0908d;
}
.music.active i:nth-of-type(6) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#f4b3c2;
}
.music.active i:nth-of-type(7) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#e8d3c7;
}
.music.active i:nth-of-type(8) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#e6cde3;
}
.music.active i:nth-of-type(9) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#e597b2;
}
.music.active i:nth-of-type(10) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#ede4cd;
}
.music.active i:nth-of-type(11) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#f8e58c;
}
.music.active i:nth-of-type(12) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#fddea5;
}
.music.active i:nth-of-type(13) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#f7bd8f;
}
.music.active i:nth-of-type(14) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#dccb18;
}
.music.active i:nth-of-type(15) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#c3d825;
}
.music.active i:nth-of-type(16) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#d8e698;
}
.music.active i:nth-of-type(17) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#b0ca71;
}
.music.active i:nth-of-type(18) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#c8d5bb;
}
.music.active i:nth-of-type(19) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#c1e4e9;
}
.music.active i:nth-of-type(20) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#a0d8ef;
}
.music.active i:nth-of-type(21) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#83ccd2;
}
.music.active i:nth-of-type(22) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#59b9c6;
}
.music.active i:nth-of-type(23) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#5383c3;
}
.music.active i:nth-of-type(24) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#8491c3;
}
.music.active i:nth-of-type(25) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#a59aca;
}
.music.active i:nth-of-type(26) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#c0a2c7;
}
.music.active i:nth-of-type(27) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#d3cfd9;
}
.music.active i:nth-of-type(28) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#a69abd;
}
.music.active i:nth-of-type(29) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#d4dcda;
}
.music.active i:nth-of-type(30) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#eae5e3;
}
.music.active i:nth-of-type(31) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#dcdddd;
}
.music.active i:nth-of-type(32) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#bed2c3;
}
.music.active i:nth-of-type(33) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#68be8d;
}
.music.active i:nth-of-type(34) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#3eb370;
}
.music.active i:nth-of-type(35) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#028760;
}
.music.active i:nth-of-type(36) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#3a5b52;
}
.music.active i:nth-of-type(37) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#00a381;
}
.music.active i:nth-of-type(38) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#5c9291;
}
.music.active i:nth-of-type(39) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#80989b;
}
.music.active i:nth-of-type(40) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#5b7e91;
}
.music.active i:nth-of-type(41) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#698aab;
}
.music.active i:nth-of-type(42) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#0094c8;
}
.music.active i:nth-of-type(43) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#007bbb;
}
.music.active i:nth-of-type(44) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#bbc8e6;
}
.music.active i:nth-of-type(45) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#8491c3;
}
.music.active i:nth-of-type(46) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#4d5aaf;
}
.music.active i:nth-of-type(47) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#867ba9;
}
.music.active i:nth-of-type(48) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#dbd0e6;
}
@-webkit-keyframes wave {
0% {
height:8px
}
50% {
height:100px
}
100% {
height:12px
}
}@keyframes wave {
0% {
height:8px
}
50% {
height:100px
}
100% {
height:12px
}
}