html5的audio实现高仿微信语音播放效果Demo
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>语音助手</title>
</head>
<body>
<div class="dialog-container">
<div class="audio-animation">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>
</div>
<div class="dialog-container">
<div class="audio-animation">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
</div>
</div>
</body>
</html>
CSS部分：
<style type="text/css">
@keyframes yuying{
%{
height: %;
}
%{
height: %;
}
%{
height: %;
}
%{
height: %;
}
%{
height: %;
}
} .dialog-container{
width: 40px;
height: 40px;
margin: 100px auto;
border: 3px solid #0094de;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.dialog-container .audio-animation{
width: 26px;
height: 26px;
}
.audioPlay #one{
animation:yuying .6s infinite .15s;
-webkit-animation:yuying .6s infinite .15s;
}
.audioPlay #two{
animation:yuying .6s infinite .3s;
-webkit-animation:yuying .6s infinite .3s;
}
.audioPlay #three{
animation:yuying .6s infinite .45s;
-webkit-animation:yuying .6s infinite .45s;
}
.audioPlay #four{
animation:yuying .6s infinite .6s;
-webkit-animation:yuying .6s infinite .6s;
} #one,#two,#three,#four{
width:2px;
border-radius: 50px;
background-color: #0094de;
vertical-align: middle;
display: inline-block;
}
#one{
margin-left: 2px;
height: %;
}
#two{
height: %;
}
#three{
height: %;
}
#four{
height: %;
}
</style>
JS部分：
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.dialog-container').click(function(){
var childNode = $(this).children('.audio-animation');
if (childNode.hasClass('audioPlay')) {
childNode.removeClass('audioPlay');
}else{
childNode.addClass('audioPlay');
}
$(this).siblings().children('.audio-animation').removeClass('audioPlay');
})
})
</script>
html5的audio实现高仿微信语音播放效果Demo的更多相关文章
- html5的audio实现高仿微信语音播放效果
效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...
- html5的audio实现高仿微信语音播放效果（实际项目）
HTML部分: <div class="tab-pane fade dialog-record" id="dialogRecord"> <vo ...
- 纯css3配合vue实现微信语音播放效果
前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...
- Android 高仿微信语音聊天页面高斯模糊效果
目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...
- js仿微信语音播放
html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...
- html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图
之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...
- GSD_WeiXin（高仿微信）应用源码
高仿微信计划:已经实现功能 1.微信首页(cell侧滑编辑.下拉眼睛动画.下拉拍短视频.点击进入聊天详情界面) 2.通讯录(联系人字母排序.搜索界面) 3.发现(朋友圈) 4.我(界面) 待实现功能( ...
- Android高仿微信（一）——如何消除启动时的白屏
默认情况下,APP启动时会先把屏幕刷成白色,然后才绘制第一个Activity中的View,这两个步骤之间的延迟会造成启动后先看到白屏(时间大概为1秒左右).时间不长,但是我们也看到,一般的APP时不存 ...
- 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)
什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...
随机推荐
- Go断言
用Go语言提供的类型检测方法,同时也可作为断言的解决方案: package main import ( "fmt" "reflect" ) type MyStr ...
- cocos2dx-lua控制台报错集合
1.invalid 'cobj' in function 'lua_cocos2dx_Node_getLocalZOrder' 这个报错是lua的变量还在,但是他底层对应的C++对象已被销毁.
- Python基础-入门之路PYTHON-包 相对导入&绝对导入
什么是包 包也是一种模块,但本质上就是一个文件夹 对于使用者而言 使用方式和模块没有任何区别 本质上就是一个文件夹 不同之处在于 多了一个__init__.py 叫包的初始化文件 import导入模块 ...
- Codeforces 993E Nikita and Order Statistics [FFT]
洛谷 Codeforces 思路 一开始想偏想到了DP,后来发现我SB了-- 考虑每个\(a_i<x\)的\(i\),记录它前一个和后一个到它的距离为\(L_i,R_i\),那么就有 \[ an ...
- Java.ftp上传下载
1:jar的maven的引用: 1 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...
- Confluence 6 使用 Apache 和 mod_proxy 的基本配置
在这些示例中,我们使用下面的信息: http://www.example.com/confluence - 你计划使用的 URL http://example:8090/ - Confluence 当 ...
- Confluence 6 数据库表-展现（Appearance）
这部分存储了有关你 Confluence 的外观和布局使用的信息. decorator 使用自定义 Velocity 布局显示的自定义模板. https://www.cwiki.us/display/ ...
- cf1143E 倍增好题！
一开始感觉用莫队可以搞一下,但是看了题解才发现这题其实是倍增套路题 把排列转换成nxt数组,然后倍增dp[i][j]表示第i个数后面有(1<<j)个数的最靠左的区间 然后从右往左扫一次即可 ...
- 高斯消元模板！！！bzoj1013
/* 高斯消元模板题 n维球体确定圆心必须要用到n+1个点 设圆心坐标(x1,x2,x3,x4...xn),半径为C 设第i个点坐标为(ai1,ai2,ai3,,,ain)那么对应的方程为 (x1-a ...
- PyCharm里面执行代码没问题，Jenkins执行时找不到第三方库
在PyCharm里面代码执行没问题 本地cmd执行也没问题 Jenkins执行时报错 原因是第三方库是用PyCharm安装的,后来在Jenkins服务器上用pip装好第三方库后,就可以执行了 再执行 ...