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

原文出处：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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

android 喇叭帧动画,CSS动画效果——语音播放小喇叭
写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果: 语音播放效果对于这个有几种实现方案:一种是直接把图标.png文件放在下面,然后再在 ...
android 小喇叭动画,CSS动画效果——语音播放小喇叭
写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果: 语音播放效果对于这个有几种实现方案: 一种是直接把图标.png文件放在下面,然后再 ...
CSS动画效果——语音播放小喇叭
写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果: 语音播放效果对于这个有几种实现方案: 一种是直接把图标.png文件放在下面,然后再 ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
html中flash的简单动画效果,css 动画效果
要搞就搞明白,一知半解时停止研究损失最大 css3意义: CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. 重点知识 C ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
CSS动画效果构成分析
CSS动画特效的基本构成文章目录 CSS动画特效的基本构成 CSS动画效果一.动画轨迹,运动路径 1.规定目标样式属性transfrom: 二.控制运动路径 transition animati ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
css动画效果制作正方体旋转相册
以下代码利用css动画效果制作了一个旋转的正方体,给正方体六个面放置好图片就可以当一个炫酷有趣的正方体旋转相框啦!可以将女朋友的照片放进去哦,赶快去试试,给女朋友一个惊喜吧! 下面没有放入背景建议大家 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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