四步搞定小菊花 Loading 动画

做动画最要的是思路，做多了，动画其实非常简单，我们今天来实现一个小菊花加载动画：

做动画的关键一步是「拆分」，这张图中包含了 12 根「小柱子」，每根小柱子的透明度不一样，让这 12 根「小柱子」旋转起来，就构成了整个动画：

做这个动画可以按照下面几步来实现：

第一步：画出 12 根小柱子，并设置不同的透明度。通过观察发现，我们可以画 12 个正方形，每个正方形中画 1 条竖线，通过旋转的方式来改变小柱子的位置：

代码可以这样写，创建一个 div 来包裹这 12 个正方形，通过 ::before 给正方形添加一个小柱子：

第二步：想把这 12 个正方形组合成一个圆，需要把他们旋转一下，每个正方形旋转 30度，正好是 1 圈（30*12=360），并设置不同的透明度：

代码类似这样，把每个元素进行旋转 30度，为不影响阅读体验，我只截了 3 个元素的代码图：

第三步：这 12 个正方形现在是竖直排列的，我们把它们重叠到一块，这些小柱子就组成了一个圆。

修改类选择器 dot 的 position 属性为 absolute，这时这些元素即可重叠起来：

为了好辨别，我给每个正方形加了边框，我把边框去掉就成了我们想要的效果：

第四步：让这个圆旋转起来就可以了：

旋转直接使用 CSS 的 animation 即可实现，这个地方需要大家注意一下，这里用的 timing-function 是 steps(12)，关于 step 函数，在小猴子跌落山崖之 linear、ease、ease-in 这节内容中我并没有提到，这里补存一下。steps 它可以把一个动画的 duration 分成几段，每段来完成一个动作，动画执行期间元素看起来并不是「平滑」地过度，比如钟表的秒针跳动：

这个小菊花的 Loading 也是让它有类似的效果，一蹦一蹦的感觉。

今天这节内容主要利用了 transform 的 rotate() 函数，在让按钮“呼吸”一会（呼吸动画）这节内容中运用了 scale() 函数，transform 对于做动画是一把「尖刀」，关于 transform 还有很多属性值得学习：

本文借鉴了 vant-weapp 的设计思想。

推荐阅读：

环形进度条没有想象的那么简单

跳动的音符动画实现原理剖析

https://github.com/youzan/vant-weapp/tree/dev/dist/loading

https://designmodo.com/demo/stepscss/index.html

四步搞定小菊花 Loading 动画相关推荐

xbox虚拟服务器,小白玩家看这里！国行Xbox One快速上手攻略四步搞定
小白玩家看这里!国行Xbox One快速上手攻略四步搞定 2014-09-25 10:55:04来源:游戏下载编辑:评论(0) 还有4天时间国行Xbox One就将与大陆玩家见面了,想想还是有点小激 ...
RxJava的使用,教你四步搞定RxBus.
教你四步搞定RxBus. 1,在你的工程中添加依赖 dependencies {compile fileTree(include: ['*.jar'], dir: 'libs')testCompi ...
四步搞定ansible-tower
四步搞定ansible-tower 环境准备 centos7 + 2c/G (笔者测试) step1 下载ansible-tower最新版 wget https://releases.ansible. ...
四步搞定OPENVAS安装
四步搞定OPENVAS安装第一步: Configure Atomicorp Repository (as user root, only once) wget -q -O http://www.at ...
四步搞定阿里云RDS云数据库恢复到本地mysql数据库
第1步:下载提取工具和阿里云rds数据库备份文件 1.先去阿里云数据rds后台–>备份恢复–>下载你的数据备份 2.下载阿里云官方提供的rds_backup_extract.sh数据备份文 ...
mfc通过ado链接oracle,VS2013环境下MFC通过ADO连接Oracle数据库四步搞定
这两天需要做有关MFC连接Oracle的项目,上网搜了老半天,东拼西凑,终于搞通了MFC下ADO方式连接Oracle的程序. 下面就按我新建的项目来进行一下说明(项目名称:adooracle) 第一步 ...
SAP GUI 自动登录教程，简单四步搞定
第一步:更改注册表在表中添加Security->EnablePassword 值设置为1 第二步:生成快捷方式登录SAP GUI 点击注销旁边的按钮按提示生产快捷生成后如图第三步:生成加 ...
AI Studio精选项目 | 儿童X光胸部肺炎诊断，用飞桨四步搞定
点击左上方蓝字关注我们还在愁如何入手二分类项目?今天小编给大家介绍一篇AI Studio的精品医疗行业二分类项目,只需4步即可达成,准确度达到95.5%以上. 项目介绍肺炎是常见病,影像检查在肺炎 ...
搞一个短信验证码登录，难吗？四步搞定！
来源:blog.csdn.net/classabcd/java/article/details/82464582 一.首先添加一个jar包,工具类会用到二.编写http请求工具类三.生成四位数的方 ...

四步搞定小菊花 Loading 动画

四步搞定小菊花 Loading 动画相关推荐

最新文章

热门文章