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. Python学习 --- 列表

    list 函数可以将 序列变为列表 列表操作: 1 . 元素赋值, 根据索引,可以直接修改 2 . 删除元素, del x[i] 3 . 分片赋值, name[1:] = list (' '), 可以 ...

  2. 【原创】大数据基础之Airflow（2）生产环境部署airflow研究

    一 官方 airflow官方分布式部署结构图 airflow进程 webserver scheduler flower(非必须) worker airflow缺点 scheduler单点 通过在sch ...

  3. Bootstrap如何配合字体自适应

    Bootstrap框架中,字体不会自适应,及时使用rem都不行,那么就只有使用媒体查询来做.这样可能会有点麻烦,但是这是我目前找到的一个方法直接上代码了 div { font-size: 12px; ...

  4. 分享一份非常强势的Android面试题

    马上步入金九银十了,是时候看一些面试题去鹅厂了,接下来我将分享一些面试题,每天总结一点点,希望对大家有所帮助! ListView和RecyclerView区别 参考链接: https://blog.c ...

  5. JSP的内置对象及方法

    request表示HttpServletRequest 对象.它包含了有关浏览器请求的信息,并且提供了几个用于获取cookie,header, 和session 数据的有用的方法.response 表 ...

  6. Ftp上传的方法

    using System;using System.Collections.Generic;using System.IO;using System.Net;using System.Text; na ...

  7. Confluence 6 字符集编码的问题解决

    如果你的 Confluence 站点的字符集没有被正确配置,你可能会遇到下面的问题: Non-ASCII 字符将会显示为问号(?) Non-ASCII 字符集的页面链接将不能工作 单一字符将会被显示为 ...

  8. Vuejs的一些总结

    http://blog.csdn.net/xllily_11/article/details/52312044 原文链接:http://mrzhang123.github.io/2016/07/14/ ...

  9. 如何编辑PDF文件，怎么使用PDF裁剪页面工具

    在编辑PDF文件的时候,往往会有很多的小技巧可以使用,在编辑PDF文件的时候,怎么对文件的页面进行裁剪呢,不会的话,看看下面的文章吧,小编已经为大家整理好了哦. 1.打开运行PDF编辑器,在编辑器中打 ...

  10. Fidder 请求信息颜色的含义

    颜色 含义 红色 HTTP状态错误 黄色 HTTP状态需用户认证 灰色 数据流类型CONNECT 或 响应内容是图片 紫色 响应内容是CSS文件 蓝色 响应内容是HTML 绿色 响应内容是Script ...