Html
    Css
    Js

    
                        
body {
	background:#333;
	width:100%;
	color:#8A3F86;
}
h1 {
	width:165px;
	height:75px;
	margin:1px auto;
	color:#a77c95;
}
.musico {
	display:block;
	margin:0 auto;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	background:#ccc;
	box-shadow:0px 0px 10px #5D2764;
	padding:20px;
	height:60px;
	width:60px;
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
}
ul {
	list-style:none;
	padding:0;
	margin:0;
}
ul li {
	display:block;
	background:#333;
	float:left;
	height:40px;
	width:5px;
	margin:0 3px;
	box-shadow:0 0 1px #333;
}
@keyframes musico1 {
	0% {
	height:30px
}
20% {
	height:10px
}
40% {
	height:40px
}
60% {
	height:30px
}
80% {
	height:20px
}
100% {
	height:30px
}
}@keyframes musico2 {
	0% {
	height:20px
}
20% {
	height:10px
}
40% {
	height:40px
}
60% {
	height:20px
}
80% {
	height:40px
}
100% {
	height:20px
}
}@keyframes musico3 {
	0% {
	height:50px
}
20% {
	height:20px
}
40% {
	height:30px
}
60% {
	height:40px
}
80% {
	height:10px
}
100% {
	height:50px
}
}@keyframes musico4 {
	0% {
	height:10px
}
20% {
	height:20px
}
40% {
	height:30px
}
60% {
	height:10px
}
80% {
	height:40px
}
100% {
	height:10px
}
}@keyframes musico5 {
	0% {
	height:10px
}
20% {
	height:30px
}
40% {
	height:20px
}
60% {
	height:30px
}
80% {
	height:20px
}
100% {
	height:10px
}
}@-webkit-keyframes musico1 {
	0% {
	height:30px
}
20% {
	height:10px
}
40% {
	height:40px
}
60% {
	height:30px
}
80% {
	height:20px
}
100% {
	height:30px
}
}@-webkit-keyframes musico2 {
	0% {
	height:20px
}
20% {
	height:10px
}
40% {
	height:40px
}
60% {
	height:20px
}
80% {
	height:40px
}
100% {
	height:20px
}
}@-webkit-keyframes musico3 {
	0% {
	height:50px
}
20% {
	height:20px
}
40% {
	height:30px
}
60% {
	height:40px
}
80% {
	height:10px
}
100% {
	height:50px
}
}@-webkit-keyframes musico4 {
	0% {
	height:10px
}
20% {
	height:20px
}
40% {
	height:30px
}
60% {
	height:10px
}
80% {
	height:40px
}
100% {
	height:10px
}
}@-webkit-keyframes musico5 {
	0% {
	height:10px
}
20% {
	height:30px
}
40% {
	height:20px
}
60% {
	height:30px
}
80% {
	height:20px
}
100% {
	height:10px
}
}.musico ul li:nth-child(1) {
	animation:musico1 1s infinite;
	-webkit-animation:musico1 1s infinite;
	background-color:#797fb4;
}
.musico ul li:nth-child(2) {
	animation:musico2 1s infinite;
	-webkit-animation:musico2 1s infinite;
	background-color:bcce;
}
.musico ul li:nth-child(3) {
	animation:musico3 1s infinite;
	-webkit-animation:musico3 1s infinite;
	background-color:#1ab667;
}
.musico ul li:nth-child(4) {
	animation:musico4 1s infinite;
	-webkit-animation:musico4 1s infinite;
	background-color:#fcd417;
}
.musico ul li:nth-child(5) {
	animation:musico5 1s infinite;
	-webkit-animation:musico5 1s infinite;
	background-color:#f21b1b;
}

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

music bar

体格动态的音乐棒

0