CSS动画效果——语音播放小喇叭（实用，赞）

深碍√TFBOYSˉ_ 2023-06-23 05:57 10阅读 0赞

原文出处：[https://www.jianshu.com/p/5a3cfcc764f5][https_www.jianshu.com_p_5a3cfcc764f5]

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

![format_png][]

语音播放效果

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

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

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

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

话不多说上代码：

![format_png 1][]

div结构

![format_png 2][]

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

![format_png 3][]

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

![format_png 4][]

渐进渐出动画效果定义

--------------------

文末附上完整代码：

<!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;                
                position:relative;    /*必须，否则苹果overflow失效*/
                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>

作者：zp蜚声  
链接：https://www.jianshu.com/p/5a3cfcc764f5  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[https_www.jianshu.com_p_5a3cfcc764f5]: https://www.jianshu.com/p/5a3cfcc764f5
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUyNjA5OS00NzBlZDViMGY0NjNjOGQ0?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUyNjA5OS00N2NlNWFkMTc2ZmI4NzI0?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUyNjA5OS0wOWQ3MGI2MTZhZDFmYjkx?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUyNjA5OS0zMWVlMzM0N2MyNjU4NWFj?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMzUyNjA5OS04YTkwZDkzM2E0OTIzYzQ0?x-oss-process=image/format,png