android 小喇叭动画,CSS动画效果—

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

语音播放效果

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

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

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

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

话不多说上代码：

div结构

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

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*/

}

android 小喇叭动画,CSS动画效果——语音播放小喇叭相关推荐

android 喇叭帧动画,CSS动画效果——语音播放小喇叭
写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果: 语音播放效果对于这个有几种实现方案:一种是直接把图标.png文件放在下面,然后再在 ...
CSS动画效果——语音播放小喇叭（实用，赞）
原文出处:https://www.jianshu.com/p/5a3cfcc764f5 写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果 ...
CSS动画效果——语音播放小喇叭
写业务代码经常会碰到要自己实现一些设计交给的小动画,今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果: 语音播放效果对于这个有几种实现方案: 一种是直接把图标.png文件放在下面,然后再 ...
android语音动画,Android逐帧动画的简单使用-语音播放效果的实现
逐帧动画(Frame-By-Frame Animation)原理很简单,即快速切换不同的图片,形成动画效果.Android中逐帧动画的实现方式也很简单,下面以语音播放效果为例说明. 1. 首先准备图片 ...
css 跳跃动画,CSS动画实例：跳跃的字符
1．翻转的字符在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: H E L L O 为container和span定义CSS样式规则,并定义实现 ...
html向下滑动动画,CSS动画:(向下滑)slidedown效果_html/css_WEB-ITnose
我们依据上一篇文章的HTML代码结构,来实现一般焦点图片跳转时候的效果. HTML CSS .outer_box { width: 100px; height: 100px; border: #bbb ...
【JavaScript、CSS】css动画、js动画
动画 js动画 css动画 Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的. CSS动画简洁高效,提升交互体验而编写的 ...
前端笔记：动画介绍与CSS动画说明
文章目录目的动画介绍 CSS动画 JavaScript动画 Canvas动画 SVG动画 CSS动画 CSS Transition CSS Animation timing-function CS ...
js模仿微信语音播放的动画效果
设计思路: 播放时使用js的setInterval来替换png达到动画效果当前demo语音播放使用插件BenzAMRRecorder.js 如需要用其它js插件来播放语音也很容易集成到本demo 准 ...

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

android 小喇叭动画,CSS动画效果——语音播放小喇叭相关推荐

最新文章

热门文章