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;
}
体格动态的音乐棒