音乐上下跑动图-阿里云开发者社区

音乐上下跑动图

2023-09-15 40

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 音乐上下跑动图

<!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>