CSS3写跳动的音频（柱子）_css做动态音柱-优快云博客

这篇博客介绍如何利用CSS3实现一个跳动的音频波形效果。通过定义不同时间间隔和速度的动画，使得柱状元素高度随时间变化，创造出模拟音频波动的视觉效果。

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