微信小程序写一个音频跳动css3动画

已于 2022-05-26 18:14:00 修改
阅读量908 收藏 2
点赞数 1
分类专栏： 微信小程序 前端技术 文章标签： 微信小程序 前端 css3
于 2021-11-18 11:02:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41366114/article/details/121396026
版权
本文将介绍如何在微信小程序中结合CSS3制作一个跟随音频播放进度的跳动动画效果。通过使用CSS3的关键帧动画与小程序的音频API，可以创建出动态的视觉反馈，提升用户体验。
摘要由CSDN通过智能技术生成

在这里插入图片描述

   .music {
   
            height: 16rpx;
            overflow: hidden;
            margin-right: 6rpx;
           	margin-bottom: 2rpx;
         .li{
   
             background-color
最低0.47元/天 解锁文章
挚友阳光
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用css实现类似语音输入动态水波纹效果
HGX-DJK
07-06 506
【代码】使用css实现类似语音输入动态水波纹效果。
微信小程序音频录制---波纹循环动画
weixin_43947294的博客
03-18 5533
实现的效果 wxml部分 <!--pages/myRecode/myRecode.wxml--> <view class="myRecode"> <view class="recode" bindtouchstart='recodeClick' bindtouchend='recodeEnd'> <text>长按</text&gt...
微信小程序实现图标闪烁动画效果
最新发布
jkjbvvb的博客
07-04 397
通过上述步骤，你已经成功地在微信小程序中实现了图标闪烁动画效果。这种动画不仅能够吸引用户的注意力，还可以在不同的场景中传达特定的信息，比如加载状态或警告提示。我们将在项目中创建一个新的页面，用于展示动画效果。定义了动画的关键帧，图标在0%和100%时完全可见（不透明度为1），在50%时不可见（不透明度为0）。通过实践和深入学习，你将能够创建出更加复杂和吸引人的动画效果，进一步提升你的微信小程序开发技能。保存更改后，在微信开发者工具中预览你的小程序，你应该能看到图标正在以1秒的周期进行闪烁。
语音播放动效css
weixin_39147099的博客
10-09 2619
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>语音播放动效</title> <style type="text/css"> @keyframes yuying1{ 0%{ hei...
css3 制作音乐播放器音乐播放跳动音符
weixin_42541698的博客
10-22 1562
// html代码 <div class="movement"> <div class="li li-1"> <span></span> </div> <div class="li li-2"> <span></spa...
CSS3写跳动的音频（柱子）
java_zhaoyanli的专栏
06-12 2401
音频波效果 *{margin:0;padding:0;list-style: none;} body{background-color: #fff;} .demo-music { position: absolute; width: 100%; height: 312px; top
CSS3模拟音符跳动效果特效代码
03-20
使用方法： 1、将CSS中的样式拷贝到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
纯css 制作音谱跳动效果
智欣约的博客
08-14 3218
在一个网站上看到“直播中”的提示标题，有趣的是文字之前有一个图表，是一个上下跳动的类似于音乐的效果，起初笔者以为是一个gif图片，准备保存下来留用。但审查元素之后发现这是通过CSS3纯代码实现的，顿时觉得很强大，于是就扒下代码研究了一番。 通过CSS3新增的动画属性animation，经过一番配置之后可以得到类似音乐频谱跳动的效果。 查看demo效果  DEMO 如果只是作为一个“图
html音乐跳动的线,利用CSS3制作跳动音乐频谱跳动效果
weixin_35823441的博客
06-03 2462
[摘要]CSS3新增很多实用的属性，特别是可以实现动画效果的animation属性，本文通过使用CSS3来实现一个类似于音乐频谱跳动效果。在一个网站上看到“直播中”的提示标题，有趣的是文字之前有一个图表，是一个上下跳动的类似于音乐的效果，起初笔者以为是一个gif图片，准备保存下来留用。但审查元素之后发现这是通过CSS3纯代码实现的，顿时觉得很强大，于是就扒下代码研究了一番。通过CSS3新增的动画属...
css3的一个小动画-----声音跳动
qq_53280805的博客
11-21 959
做视频的时候感觉每集在播放的时候有一个小动画在跳动感觉挺好看的，就觉得自己也要做一个，以前做的那个不是在同一个底线上的，他是来回跳动的，看着有点乱1，这星期我就把他的高度调了一下，后来发现我做的和爱奇艺上的是上下颠倒的，试试translateY的正负，发现越试越离谱，最后就想到了转他1890度，终于达到了想要的效果。 <div class='bounc'> <ul>
微信小程序 # 录音动画
skysys的研究小屋
06-04 899
背景 开发一个翻译小程序时，提供有语音翻译功能。在点击麦克风按钮的时候，需要在当前页面前置顶显示麦克风动画，表示正在录音。 实现 在我的项目中采用了CSS动画，如果要看其他方案大家请看文末参考 接入方式： <view class="pic myRecode" wx:if="{{recordState == true}}"> <view class="recode"> <!-- 这个是中间的那个麦克风icon--> <text class="i
纯CSS3模拟跳动的音乐音符效果.zip
07-03
效果描述： 我们在听音乐的时候，经常看到某个角落里有一个随着音乐高低而跳动的东东 几根竖线这样高低跳动，看着蛮有意思的
纯CSS实现语音动画.docx
05-11
微信小程序录音时需要动画，参照网上的安全写了一个，采用纯css的方式动画实现
微信小程序制作音乐跳动动画样例源码
04-23
微信小程序制作音乐跳动动画样例，实际项目中应用录音上传到服务器，然后服务器解析音频后把分贝值传给小程序,小程序绘制音乐跳动动画。
css3之音乐抖动条
wzp20092009的博客
12-03 609
<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...
微信小程序开发-76种动画 animate.css
Just for fun的专栏
12-16 1093
1、微信小程序动画有自己的方法：官方链接 但需要自己去写动画效果，比较麻烦。 2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内使用。 animate.css包含76种动画，使用非常简单。animate.css官网 3、由于小程序对代码大小限制比较大，所以删除了animate.css中 所有@-webkit-部分css，减少了一半体积 再把文件后缀名改为wxss，...
css 语音,用css完成语音助手小动画
weixin_39942637的博客
08-03 791
用css完成语音助手小动画2020年08月10日|萬仟网IT编程 |我要评论震惊！用css完成语音助手小动画不要太简单！语音助手动画定位布局添加动画语音助手动画hello大家好，我是Aaron。想必大家都见过这个页面，在各个平台的语音助手都可以看到类似的动画。那么这个小动画用css怎么实现呢，其实我们只需要考虑最重要的两点，一是用定位布局把我们所...
CSS动画效果——语音播放小喇叭 （实用，赞）
chelen_jak的专栏
12-17 5695
原文出处：https://www.jianshu.com/p/5a3cfcc764f5 写业务代码经常会碰到要自己实现一些设计交给的小动画，今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果： 语音播放效果 对于这个有几种实现方案： 一种是直接把图标.png文件放在下面，然后再在上面覆盖一层跟它弧度相似的圆形div，通过css的animation去控制那个覆盖的div从左向...
vue + css3实现微信录制播放语音效果
p_5050的博客
08-25 2928
vue + css3实现微信录制播放语音效果
微信小程序写一个3d盒子
03-20
非常感谢您的提问！我可以为您提供一些关于微信小程序中如何实现3D盒子的建议。 首先，您可以使用小程序的canvas组件来实现3D效果。您可以使用WebGL或Three.js等库来创建3D场景，并将其渲染到canvas上。 其次，您可以使用小程序的动画API来实现盒子的旋转和缩放等动画效果。您可以使用wx.createAnimation()方法创建动画实例，并使用该实例的方法来设置动画效果。 最后，您可以使用小程序的事件处理机制来实现用户与3D盒子的交互。您可以使用canvas的事件监听器来捕获用户的点击事件，并根据用户的操作来改变3D场景的状态。 希望这些建议能够帮助您实现一个漂亮的3D盒子！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值