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的更多相关文章

  1. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

  2. html5的audio实现高仿微信语音播放效果(实际项目)

    HTML部分: <div class="tab-pane fade dialog-record" id="dialogRecord"> <vo ...

  3. 纯css3配合vue实现微信语音播放效果

    前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...

  4. Android 高仿微信语音聊天页面高斯模糊效果

    目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...

  5. js仿微信语音播放

    html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...

  6. html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图

    之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面.采用html5+css3+Zepto+sw ...

  7. GSD_WeiXin(高仿微信)应用源码

    高仿微信计划:已经实现功能 1.微信首页(cell侧滑编辑.下拉眼睛动画.下拉拍短视频.点击进入聊天详情界面) 2.通讯录(联系人字母排序.搜索界面) 3.发现(朋友圈) 4.我(界面) 待实现功能( ...

  8. Android高仿微信(一)——如何消除启动时的白屏

    默认情况下,APP启动时会先把屏幕刷成白色,然后才绘制第一个Activity中的View,这两个步骤之间的延迟会造成启动后先看到白屏(时间大概为1秒左右).时间不长,但是我们也看到,一般的APP时不存 ...

  9. 安卓开发笔记——Fragment+ViewPager组件(高仿微信界面)

    什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再 ...

随机推荐

  1. web缓存服务器varnish-4.1.6的部署及配置详解

    web缓存服务器varnish-4.1.6的部署及配置详解 1.安装varnish4.1.6安装依赖 yum install -y autoconf automake jemalloc-devel l ...

  2. jquery日常使用总结

    1.如何跳出each循环 用 return false, 不是 break. $.each(resArray, function(j, n) { if (1 == n) { return false; ...

  3. [JavaScript]使用ArrayBuffer和Blob编辑二进制流

    Blob()构造方法返回一个新的Blob对象. 内容是包含参数array的二进制字节流. 语法 var aBlob = new Blob( array, options ); 参数 array is ...

  4. grep,find

    grep是强大的文本搜索工具,他可以对文件逐行查看,如果找到匹配的模式,就可以打印出包含次模式的所有行,并且支持正则表达式 find查找文件的grep是来查找字符串的,文件的内容 grep 文件的内容 ...

  5. input file 多张图片上传 获取地址 ——fileReader

    //上传图片 $('#files').change(function(e){ var fil = this.files; var m =0; if(fil.length>3){ alert('重 ...

  6. GitHub访问慢

    问题描述 一直都觉得访问 GitHub 时速度非常慢,刷新一下都要等好久!于是尝试一下能否解决掉... github.com assets-cdn.github.com avatar2.githubu ...

  7. 设置外部查找工具来索引 Confluence 6

    任何网页的 crawler  工具都可以被用来索引你的 Confluence 站点中的内容.如果你希望注册用户才能够查看的内容也被索引的话,你需要为你的 Confluence 创建一个只被 crawl ...

  8. jacoco + eclipse单元测试覆盖率

    概念 Jacoco:JaCoCo是一个开源的覆盖率工具,它针对的开发语言是java,其使用方法很灵活,可以嵌入到Ant.Maven中:可以作为Eclipse插件,可以使用其JavaAgent技术监控J ...

  9. JS:事件循环机制、调用栈以及任务队列

    点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...

  10. vsftpd中的local_umask和anon_umask

    umask是在linux中常见的一个东西,它其实是一个掩码.当然,也有umask这样一个命令,它是对用户建立的文件的默认属性的定义.该 定义为: 假设umask为022,则对于一个文件夹的话,它的默认 ...