CSS动画效果——语音播放小喇叭 (实用,赞)

  • Post author:
  • Post category:其他

原文出处:https://www.jianshu.com/p/5a3cfcc764f5

写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的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;                
            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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。