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