* {
margin:0;
padding:0;
}
body {
background-color:#292929
}
.music {
width:700px;
height:1px;
margin:100px auto;
position:relative;
}
.music i {
width:13px;
height:7px;
position:absolute;
bottom:0;
background-color:#EEAD0E;
}
.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:#0000FF;
}
.music.active i:nth-of-type(2) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#21E412;
}
.music.active i:nth-of-type(3) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#B10880;
}
.music.active i:nth-of-type(4) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#FFFF00;
}
.music.active i:nth-of-type(5) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#FF0000;
}
.music.active i:nth-of-type(6) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#EEAD0E;
}
.music.active i:nth-of-type(7) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#FF00FF;
}
.music.active i:nth-of-type(8) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#808000;
}
.music.active i:nth-of-type(9) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#32CD32;
}
.music.active i:nth-of-type(10) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#21E412;
}
.music.active i:nth-of-type(11) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#644ABA;
}
.music.active i:nth-of-type(12) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#2062AC;
}
.music.active i:nth-of-type(13) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#299D52;
}
.music.active i:nth-of-type(14) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#58AD45;
}
.music.active i:nth-of-type(15) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#C1DE2C;
}
.music.active i:nth-of-type(16) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#FF00FF;
}
.music.active i:nth-of-type(17) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#EEAD0E;
}
.music.active i:nth-of-type(18) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#FF0000;
}
.music.active i:nth-of-type(19) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#FFFF00;
}
.music.active i:nth-of-type(20) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#B10880;
}
.music.active i:nth-of-type(21) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#21E412;
}
.music.active i:nth-of-type(22) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#0000FF;
}
.music.active i:nth-of-type(23) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#644ABA;
}
.music.active i:nth-of-type(24) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#2062AC;
}
.music.active i:nth-of-type(25) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#299D52;
}
.music.active i:nth-of-type(26) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#58AD45;
}
.music.active i:nth-of-type(27) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#C1DE2C;
}
.music.active i:nth-of-type(28) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#E5BF42;
}
.music.active i:nth-of-type(29) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#EB7E2C;
}
.music.active i:nth-of-type(30) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#D01725;
}
.music.active i:nth-of-type(31) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#D11E72;
}
.music.active i:nth-of-type(32) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#B10880;
}
.music.active i:nth-of-type(33) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#5E157F;
}
.music.active i:nth-of-type(34) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#EEAD0E;
}
.music.active i:nth-of-type(35) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#0000FF;
}
.music.active i:nth-of-type(36) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#FF0000;
}
.music.active i:nth-of-type(37) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#21E412;
}
.music.active i:nth-of-type(38) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#644ABA;
}
.music.active i:nth-of-type(39) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#2062AC;
}
.music.active i:nth-of-type(40) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#299D52;
}
.music.active i:nth-of-type(41) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#58AD45;
}
.music.active i:nth-of-type(42) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#C1DE2C;
}
.music.active i:nth-of-type(43) {
-webkit-animation:wave 0.66s linear infinite;
animation:wave 0.66s linear infinite;
background-color:#E5BF42;
}
.music.active i:nth-of-type(44) {
-webkit-animation:wave 0.8s linear infinite;
animation:wave 0.8s linear infinite;
background-color:#EB7E2C;
}
.music.active i:nth-of-type(45) {
-webkit-animation:wave 0.7s linear infinite;
animation:wave 0.7s linear infinite;
background-color:#D01725;
}
.music.active i:nth-of-type(46) {
-webkit-animation:wave 0.5s linear infinite;
animation:wave 0.5s linear infinite;
background-color:#D11E72;
}
.music.active i:nth-of-type(47) {
-webkit-animation:wave 0.9s linear infinite;
animation:wave 0.9s linear infinite;
background-color:#B10880;
}
.music.active i:nth-of-type(48) {
-webkit-animation:wave 1.2s linear infinite;
animation:wave 1.2s linear infinite;
background-color:#5E157F;
}
@-webkit-keyframes wave {
0% {
height:8px
}
50% {
height:100px
}
100% {
height:12px
}
}@keyframes wave {
0% {
height:8px
}
50% {
height:100px
}
100% {
height:12px
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
