* { margin:0; padding:0; } body { background-color:#292929 } .music { width:100%px; 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 } }
跳动的 修改html 和 CSS 相对应的及颜色 都可以修改 傻瓜模式 一看就会