CSS3写跳动的音频（柱子）

最新推荐文章于 2024-07-17 09:59:01 发布
最新推荐文章于 2024-07-17 09:59:01 发布
阅读量2.4k 收藏 2
点赞数 3
分类专栏： myWork-- 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/51647964
版权
这篇博客介绍如何利用CSS3实现一个跳动的音频波形效果。通过定义不同时间间隔和速度的动画，使得柱状元素高度随时间变化，创造出模拟音频波动的视觉效果。
摘要由CSDN通过智能技术生成 
    <!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元/天 解锁文章
java_zhaoyanli
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序写一个音频跳动css3动画
挚友阳光的博客
11-18 932
微信小程序写一个音频跳动css3动画
【音视频】播放音频能量跳动状态柱状View
唯爱丶卡卡西的博客
03-08 882
引言 做音视频类的APP，大多都会遇到一个需要用的VIEW，那就是 一般简单点，我们就搞个帧动画，UI 切切切就完事，这是最简单的，也是成效最快的，缺点就是一直循环的几张图。 另一种情况就是手写VIEW，这样更高大上点，效果看起来也比较好，而且颜色以及柱的数量高度可以随意定制。 自定义VIEW public class AudioColumnView extends View { priv...
CSS动画实现音频播放时柱状波动效果
yan_danfeng的博客
11-13 2484
通过CSS的动画属性animation实现音频播放时的动画效果，同时配合JS操作动画的animation-play-state属性，来控制动画的暂停和播放。
css3 制作音乐播放器音乐播放跳动音符
weixin_42541698的博客
10-22 1584
// html代码 <div class="movement"> <div class="li li-1"> <span></span> </div> <div class="li li-2"> <span></spa...
音频可视化--柱形波状图
最新发布
Liszter
07-17 354
音频可视化--柱形波状图 js 实现
微信小程序-H5-uniapp css制作上下跳动的柱状图——频谱
XujiRe的博客
12-27 1754
当前端开发一些H5或者微信小程序页面的时候，总会遇到一些奇怪的设计，他的音乐关闭按钮不用转圈的音符，那只要加入旋转动画+切换音符图片即可。 那么当要制作一些上下跳动的柱状图（频谱）的话我们需要怎么做呢？ 一、微信小程序（uniapp如下） uniapp与微信小程序的写法类似，小伙伴们自己动动脑哦 效果图如下： 当然这个是会动的，话不多说上代码 在微信小程序wxml中是这样的： <view class="con-audio" bindtap="conMusic"> <section&
纯css 制作音谱跳动效果
智欣约的博客
08-14 3224
在一个网站上看到“直播中”的提示标题，有趣的是文字之前有一个图表，是一个上下跳动的类似于音乐的效果，起初笔者以为是一个gif图片，准备保存下来留用。但审查元素之后发现这是通过CSS3纯代码实现的，顿时觉得很强大，于是就扒下代码研究了一番。 通过CSS3新增的动画属性animation，经过一番配置之后可以得到类似音乐频谱跳动的效果。 查看demo效果  DEMO 如果只是作为一个“图
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 2706
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
CSS3音乐均衡器跳动动画特效
06-11
【CSS3音乐均衡器跳动动画特效】是一种利用CSS3特性来实现的视觉效果，它模拟了音频设备中的音乐均衡器，通过不同颜色的色块动态变化，展示音乐的节奏和韵律。这个特效通常用于网页设计，为用户提供更加生动且富有...
html音乐跳动的线,利用CSS3制作跳动音乐频谱跳动效果
weixin_35823441的博客
06-03 2488
[摘要]CSS3新增很多实用的属性，特别是可以实现动画效果的animation属性，本文通过使用CSS3来实现一个类似于音乐频谱跳动效果。在一个网站上看到“直播中”的提示标题，有趣的是文字之前有一个图表，是一个上下跳动的类似于音乐的效果，起初笔者以为是一个gif图片，准备保存下来留用。但审查元素之后发现这是通过CSS3纯代码实现的，顿时觉得很强大，于是就扒下代码研究了一番。通过CSS3新增的动画属...
HTML5音频可视化频谱跳动代码.zip
07-05
HTML5音频可视化频谱跳动代码是一款基于HTML5 Canvas实现的音乐频谱跳动动画效果。
css 简单的音频跳动的动画
liangyk1005的博客
05-19 2397
vue组件 <template> <div id="app"> <div id="box"> <div></div> <div></div> <div></div> <div></div> </div> </div> </template> <script
css3之音乐抖动条
wzp20092009的博客
12-03 615
<style type="text/css"> .box{ margin:100px auto; width:300px; } .box .pillar{ display:inline-block; width:20px; height:20px; background-color:#06c; animation:scaleY .6s infinite; transfo...
html5+css3时间音频波动,css3 做成的音频波动效果
weixin_31782323的博客
06-09 535
音频波效果#container{position:relative;}#container span{width:5px;height: 5px;top:0px;position:absolute;background:red;-webkit-animation: bodong 0.5s infinite ease;}#container span:first-child{left:0px;-w...
实现动态音量条
Kanglizi的专栏
08-14 1748
scroll bar .wrapper{ position: relative; width: 500px; height: 40px; /*border: 1px solid black;*/ background-color: #92ECF5; } #volumeValue{ font-size: 20px; l
CSS3柱状波浪动画js特效
ICode联盟
05-20 393
下载地址 CSS3柱状波浪动画特效，css3基于animation属性制作彩色阶梯和可爱的表情组合阶梯波浪动画特效。 dd:
html动画透明与音乐,css animation实现音乐震动条
weixin_39988779的博客
06-04 282
效果如下实现核心就是用关键帧keyframe在动画的不同阶段设置不同百分比高度，每个div的keyframe设置为一样，此时所有div的高度变化是一样的，要产生视觉上的差异，只要将每一段完成的时间设为不一样即可，一个先完成一个后完成，因为关键帧是一样的，所以只要设置动画完成的时间挨个逐渐不一样即可。1.DOM结构2.CSS样式* {margin: 0;padding: 0;}.content {w...
css3 写个音频的动画图
05-30
好的，以下是一个简单的示例代码，可以实现一个音频的动画图： HTML代码： ```html <div class="audio-animation"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </div> ``` CSS代码： ```css .audio-animation { display: flex; justify-content: center; align-items: center; height: 100px; } .bar { width: 10px; height: 50px; margin: 0 5px; background-color: #ccc; animation: bar-animation 1s infinite ease-in-out; } .bar:nth-child(1) { animation-delay: 0.1s; } .bar:nth-child(2) { animation-delay: 0.2s; } .bar:nth-child(3) { animation-delay: 0.3s; } .bar:nth-child(4) { animation-delay: 0.4s; } .bar:nth-child(5) { animation-delay: 0.5s; } @keyframes bar-animation { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } 100% { transform: scaleY(1); } } ``` 在上面的代码中，我们使用了 CSS3 的动画特性来实现音频的动画图。首先，我们创建了一个父元素 `.audio-animation`，并将其设置为 flex 布局，以便子元素可以水平居中和垂直居中。然后，我们创建了 5 个条形元素 `.bar`，并在父元素中水平排列。每个条形元素都设置了一个动画 `bar-animation`，它会让条形元素在 1 秒的时间内不停地缩放，从而形成动画效果。我们使用了 `animation-delay` 属性来让每个条形元素的动画开始时间有所不同，从而实现了音频的波动效果。 你可以将上面的代码复制到 HTML 和 CSS 文件中并运行，查看效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值