CSS3写跳动的音频（柱子）

来源：互联网发布：平定四方巾知乎编辑：程序博客网时间：2024/04/30 14:23
    <!DOCTYPE html>      <html>          <head>              <meta charset='uft-8'>              <title>音频波效果</title>              <style type="text/css">  *{margin:0;padding:0;list-style: none;}body{background-color: #fff;}.demo-music {  position: absolute;  width: 100%;  height: 312px;  top: 120px;  zoom: 1.5;}.demo-music .music {  width: 312px;  height: 50px;  top: 0;  left: 0;  -webkit-transform: translate(-40px, -25px);  transform: translate(40px, -25px);  position: absolute;}.demo-music #waves {  width: 312px;  height: 300px;  position: absolute;  top: 12px;  left: 12px;}.demo-music #waves li {  position: relative;  float: left;  height: 100%;  width: 16px;  overflow: hidden;  margin-right: 1px;  }.demo-music #waves li span {  position: absolute;  bottom: 0;  display: block;  height: 6px;  width: 16px; background: radial-gradient(transparent 0%, rgba(42, 231, 0, 1) 100%); <!---webkit-gradient(linear,200,#D80901,#28E700);-->}.demo-music #waves .li1 span {  animation: waves 1s linear 0s infinite alternate;  -webkit-animation: waves 6s linear 0s infinite alternate;}.demo-music #waves .li2 span {  animation: waves 3s linear 0s infinite alternate;  -webkit-animation: waves 2s linear 0s infinite alternate;}.demo-music #waves .li3 span {  animation: waves 2s linear 0s infinite alternate;  -webkit-animation: waves 1s linear 0s infinite alternate;}.demo-music #waves .li4 span {  animation: waves 2.5s linear 0s infinite alternate;  -webkit-animation: waves 0.8s linear 0s infinite alternate;}.demo-music #waves .li5 span {  animation: waves 5s linear 0s infinite alternate;  -webkit-animation: waves 0.7s linear 0s infinite alternate;}.demo-music #waves .li6 span {  animation: waves 8s linear 0s infinite alternate;  -webkit-animation: waves 0.5s linear 0s infinite alternate;}@-webkit-keyframes waves {  10% {height: 20%;  }  20% {height: 60%;  }  40% {height: 40%;  }  50% {height: 100%;  }  100% {height: 50%;  }}@keyframes waves {  10% {height: 20%;  }  20% {height: 60%;  }  40% {height: 40%;  }  50% {height: 100%;  }  100% {height: 50%;  }}.ani-li{width:16px;height:6px;}            </style>  <script>for(var i=1;i<=100;i++){}</script>        </head>          <body>              <div class="demo-music"><div class="music">  <ul id="waves" class="movement"><li class="li1"><span class="ani-li"></span><span class="ani-li2"></span></li><li class="li2"><span class="ani-li"></span></li><li class="margin-note"></li><li class="li3"><span class="ani-li"></span></li><li class="li4"><span class="ani-li"></span></li><li class="margin-note"></li><li class="li5"><span class="ani-li"></span></li><li class="li6"><span class="ani-li"></span></li>  </ul>  <div class="music-state"></div></div>    </div>        </body>      </html>
0 0