Html
    Css
    Js

    
                        
* {
	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
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

非常漂亮音符跳动CSS3模拟效果

跳动的  修改html 和 CSS  相对应的及颜色  都可以修改   傻瓜模式 一看就会  

0