CSS动画效果——语音播放小喇叭

写业务代码常常会碰到要本身实现一些设计交给的小动画，今天咱们就来看下小喇叭那种相似倒过来的wifi图标同样的效果：css

语音播放效果

对于这个有几种实现方案：html

一种是直接把图标.png文件放在下面，而后再在上面覆盖一层跟它弧度类似的圆形div，经过css的animation去控制那个覆盖的div从左向右移动，从而实现出这种效果（其实仍是有区别的，用div控制移动就会出现一个一个逐渐出现且，会同时消失的场景，而不是这种波浪式的递推）前端

另一种是把这个图标切分红三块，经过布局调整每一个小图标的间距，而后经过js去控制每一个小图标的出现顺序以及时间，这种方法的好处就是很灵活，并且代码编写起来也比较直观。html5

可是咱们做为一个前端攻城狮不能老写偏中后台的逻辑代码，总得学会用css装饰本身吧，更况且如今css3的出现，页面的动画变得能够像ppt同样舒服了。因此我介绍下最后一种方式，就是用div块去设定border而后再给div一个border-radius:50%，作出三个圆调整好位置，而后用一个矩形的div转变角度去盖住这三个圆，最后经过css3的animation去控制渐进渐出，从而实现上图的效果！jquery

话很少说上代码：css3

div结构

css代码外部div块以及圆环通用样式

css代码每一个小环的大小、位置以及动画定义

渐进渐出动画效果定义

文末附上完整代码：浏览器

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>微信语音样式</title>
    <style type="text/css"> *{ margin: 0; padding: 0; } .box { width: 120px; height: 120px; box-sizing: border-box; position: relative; margin: 50px auto; } .wifi-symbol { width: 50px; height: 50px; box-sizing: border-box; overflow: hidden; transform: rotate(135deg); } .wifi-circle { border: 5px solid #999999; border-radius: 50%; position: absolute; } .first { width: 5px; height: 5px; background: #cccccc; top: 45px; left: 45px; } .second { width: 25px; height: 25px; top: 35px; left: 35px; animation: fadeInOut 1s infinite 0.2s;. } .third { width: 40px; height: 40px; top: 25px; left: 25px; animation: fadeInOut 1s infinite 0.4s; } @keyframes fadeInOut { 0% { opacity: 0; /*初始状态 透明度为0*/ } 100% { opacity: 1; /*结尾状态 透明度为1*/ } } </style>
</head>
<body>
    <div class="box">
        <div class="wifi-symbol">
            <div class="wifi-circle first"></div>
            <div class="wifi-circle second"></div>
            <div class="wifi-circle third"></div>
        </div>
    </div>
</body>
</html>复制代码

方案二

微信语音播放动画：bash

// html
<div class="voice">
  <div class="bg voicePlay"></div>
</div>
复制代码

css3: 微信

.voice{ 
  padding-top: 12px;
  padding-left: 10px;
  margin: 100px auto;
  height: 35px;
  width: 150px;
  background: #1bbc9b;
  border-radius: 0 7px 7px;
}

.bg {
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzlFRDZDRDNENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzlFRDZDRDJENzlFMTFFNkJDN0NFMjA2QTFFRTRDQkIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTAxQkEzQ0RENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTAxQkEzQ0VENzM2MTFFNjgyMEI5MTNDRkQ0OTM5QUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4K4iKVAAACUUlEQVR42uSazytEURTHvTHjR4kaU8xsSDZSdmbjx4oSK8XGQrJlpSwYTSmxEWWhUIpsZK3kD7DRNBuSBZFCNjZ+JPKcV6ecXu/d3sy7595bc+vbfXPue5/749z77o83lm3bZYYFC8RZqAbQAigP2tXNj5aZF7gdkAZNk9+7WvnOCCgxRUCb9n/o1sk3pUH6QDHF/GNsoM+QeYfiy6qkFeLZDBb0GlTB4AAR/xXT9nXxZVa0WCekQd9Y0HOJjg3CHySviiZmfjO3AyIhnu0gBc0wjAIR/wLtW8z87aAOWAI9gqaYRoAff4ZUoi7EKCiUP462j4CdSCrfK4N1Ahpi6I0i/hPa50M4oFB+Dbm/SzXfL5MD4rUogxP8+Itozynm59E+q5ovyuQdHxphWh568XvR5kxq1SEn40L4e0XMA1L4EcEe7RTjLqYdqRf/gezQUwr5LxjXq+aLHPCFcTmTA7z4tutIQhXfLiJPKXyRA/oxzgW8v9DgxU+S62eF/ATGr6r5fg26Corj9RHD4Z0fvwfjS9CbQn4bxrfK+R6TyzxZNk260solTL4i/g3al10TsMXIryA72T7VfK8MnJO8X9CKy14lafXjxx8jFUsSeyUzfxhtPwHPoqTy/TJJMJzJiPgNpJdsuNJizPwztB/q4JtwHN2KW3sn3HuMOouR30l6bbsOvgkOyGIBnaPbRldalJl/h2knuvgmOKAWNAFKMUz4Iv4O6Z1xXXxTPxtazHy6khnVyS/Fb8IDpHGyuvmWgX9L4Q4toDnQFWhNN/9PgAEAR4w1ULjdCbEAAAAASUVORK5CYII=) right 0 no-repeat;
    width: 24px;
    height: 24px;
  background-size: 400%;
}

.voicePlay {
  animation-name: voicePlay;
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: steps(3);
}

@keyframes voicePlay {
  0% {
    background-position: 0;
  }
  100% {
    background-position: 100%;
  }
}复制代码

方案3 ---

html5 audio

思路

关于播放动画，这个很简单，咱们能够用css3的逐帧动画来实现。关于逐帧动画，我以前的文章也写过：www.haorooms.com/post/zhuzhe…markdown

图片以下：

除了动画以外，剩下的就是js对audio的控制了。

html5 audio

关于html5 audio标签，有不少属性，你们能够搜索一下，例如preload、autoplay、loop、controls等等。让其隐藏，咱们能够添加一个隐藏参数，代码以下：

<audio preload="auto" hidden="true"><source src="mp3/Kalimba.mp3" type="audio/mpeg"></audio>复制代码

这样，这个audio 就能够隐藏显示，接下来咱们就能够用js对其进行操做控制了。

audio经常使用方法

addTextTrack()    向音频/视频添加新的文本轨道

canPlayType()     检测浏览器是否能播放指定的音频/视频类型

load()    从新加载音频/视频元素

play()    开始播放音频/视频

pause()    暂停当前播放的音频/视频复制代码

audio经常使用事件

事件对咱们很是有用，能够经过判断音频是否加载完成，来进行动画的操做，例如，咱们点击录音，先有一个加载loading动画，而后在变成咱们前面所讲的逐帧动画。

abort    当音频/视频的加载已放弃时
canplay    当浏览器能够播放音频/视频时
canplaythrough    当浏览器可在不因缓冲而停顿的状况下进行播放时
durationchange    当音频/视频的时长已更改时
emptied    当目前的播放列表为空时
ended    当目前的播放列表已结束时
error    当在音频/视频加载期间发生错误时
loadeddata    当浏览器已加载音频/视频的当前帧时
loadedmetadata    当浏览器已加载音频/视频的元数据时
loadstart    当浏览器开始查找音频/视频时
pause    当音频/视频已暂停时
play    当音频/视频已开始或再也不暂停时
playing    当音频/视频在已因缓冲而暂停或中止后已就绪时
progress    当浏览器正在下载音频/视频时
ratechange    当音频/视频的播放速度已更改时
seeked    当用户已移动/跳跃到音频/视频中的新位置时
seeking    当用户开始移动/跳跃到音频/视频中的新位置时
stalled    当浏览器尝试获取媒体数据，但数据不可用时
suspend    当浏览器刻意不获取媒体数据时
timeupdate    当目前的播放位置已更改时
volumechange    当音量已更改时
waiting    当视频因为须要缓冲下一帧而中止复制代码

例如以下代码：

audio.onloadedmetadata = function () {
    $(_this).removeClass("loading");
    $(_this).addClass("playing");
}复制代码

当音频文件已经加载到浏览器以后，去除加载动画，增长播放动画。

js 操做音频文件播放暂停

以下代码能够控制audio播放仍是暂停

var audio = document.getElementById('haorooms'); 
 if(audio!==null){             
    //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
     alert(audio.paused);
  if(audio.paused)                     {                 
      audio.play();//audio.play();// 这个就是播放  
  }else{
   audio.pause();// 这个就是暂停
  }
 } 复制代码

固然也能够经过jquery轻松操做！

var audio = $(that).children("audio")[0];//获取，这段代码直接从咱们文件中copy而来，能够直接写$("audio")[0]
    audio.load();//加载
    audio.play();//播放
  audio.pause();//暂停复制代码

值得注意的是，咱们能够用定时器来让语音播放结束以后，动画去掉。

定时器能够用setTimeout来写！关于setTimeout，能够看我以前的文章！

定时器是一个变量！

var second=$(that).data("second");//获取音频秒数
            _this.dshiqi=setTimeout(function(){ //dshiqi是外层定义好的一个变量！
                $(that).removeClass("playing");//播放完毕去除动画
            },second*1000)复制代码

记得在每次切换点击的时候，清除以前的定时器

clearTimeout(_this.dshiqi);复制代码

不清除定时器，来回点击录音，会有问题！

上面就是对html5的audio实现高仿微信语音播放效果简单总结，欢迎留言交流！

ps ：好多朋友问有没有demo，找了一下，发现只有一个很挫的静态页面，是以前用jquery写的，你们将就着看下吧！

地址：resource.haorooms.com/softshow-29…