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

最新推荐文章于 2025-06-16 15:27:45 发布

转载

最新推荐文章于 2025-06-16 15:27:45 发布 · 1.4w 阅读

43 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c9de78af265da30bc336726

文章标签：

#javascript #前端 #ViewUI

本文介绍了如何使用CSS3动画和HTML5 audio标签来创建类似微信语音播放的小喇叭动画效果。通过调整div的border-radius和利用animation实现波浪式递推效果。同时讲解了html5 audio的常用属性和方法，以及如何用JavaScript控制音频的播放与暂停，包括加载动画的处理。提供了简单的代码示例和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

语音播放效果

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

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

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

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

话不多说上代码：

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;