CSS3写跳动的音频（柱子）

java_zhaoyanli

于 2016-06-12 17:53:09 发布

阅读量2.5k

点赞数 3

分类专栏： myWork-- 文章标签： css3

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/51647964

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最低0.47元/天解锁文章