<!doctype html> <html> <head> <meta charset="utf-8"> <title>音乐上下跑动图</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } .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: #00bc12; } .musico ul li:nth-child(2) { animation: musico2 1s infinite; -webkit-animation: musico2 1s infinite; background: #00bc12; } .musico ul li:nth-child(3) { animation: musico3 1s infinite; -webkit-animation: musico3 1s infinite; background: #00bc12; } .musico ul li:nth-child(4) { animation: musico4 1s infinite; -webkit-animation: musico4 1s infinite; background: #00bc12; } .musico ul li:nth-child(5) { animation: musico5 1s infinite; -webkit-animation: musico5 1s infinite; background: #00bc12; } </style> </head> <body> <div class="musico"> <ul> <li class="bar1"></li> <li class="bar2"></li> <li class="bar3"></li> <li class="bar4"></li> <li class="bar5"></li> </ul> </div> <div style="width: 100%;text-align: center;">记得考虑兼容性，最好用gif图片代替</div> </body> </html>
