优雅的写个加载动画

纳尼 为何要加载动画 ？

用户在进行某些操做时，都要从服务器获取资源，这个过程都须要时间，为了减小用户等待中产生的焦虑与不安，咱们应该在合理的时间内作出合理的安抚，告诉用户他的操做是有回应的，因此一个优雅的加载可的方式也能够作的很是有趣，让用户轻松自在的享受等待。

下面我来们看个案例：

通过一场址皮产品经理终于妥协了，效果图以下：

又一次灵魂对白：

UI小妹跟前端小哥一顿乱沟通，最终确认效果以下：

好了，咱们言归正转，不扯那些有的没的了，接来就交给html5,css3 去实现了。

我先将主要的css3属性列出来

position 定位是跑不了的 animation css动画 @keyframes 桢 transform 变换

• 以上属性有不明白的，能够上菜鸟教程自行查看 ~_~

接下来全方位为你解析：

同心圆加载动画

先来解析一下结构
复制代码

这个时候有人就会问，一个结构怎么画出两个圆？
复制代码

before after

看到这两个应该熟悉了吧，咱们利用这两个伪类选器，在....以前，在....以后。
复制代码

只画了外圆的细节图，内圆的细节跟几乎是同样的，只不是内圆他是一开始就放大，外圆是一开始缩小，这个他们就错开了方向。
复制代码

环球旋转360度动画

这个相对来讲比较简单一些，同理先说结构，他的结构也只有一个，他有两个形状，在这里不须要伪类选器。
复制代码

结构思路：

利用边框实现效果，边框分为四条边，只要一条边颜色跟其它边框颜色不同就能够实现。
复制代码

这个旋转的动画就比较简单了。
复制代码

小球碰撞动画

通过前面两个加载动画的熏陶，应该对接下来的动画有点思路了吧，说难也不难，只要理解他的一个思路去计算就不复杂了。
这个碰撞动画我会分为几个步骤来解析。

首先来看一下结构

复制代码

四个小球都须要一个载体来肯定他们的定位，每一个小球都有共同的样式，因此给他们一个共同的类名item
先肯定定位 position
复制代码

初始化结构

初始化位置

由于咱们是交替运行的，因此要把四个小球先散开, 再把动画名称加上
复制代码

关键桢

想要动画运行起来关键桢，是关键，首先咱们来解析球的运行轨迹。
复制代码

0% {  }  100% {  }
百分比来规定变化发生的时间，0% 是动画的开始，100% 是动画的完成。
如上图所示：0% 咱们作了什么事情 100% 咱们作了什么事情

200% -200% 一负一正 我这里解释一下：
正数表示物体往右或往下移动，负数表示物体往左或往上移动
复制代码

到这里已经结束了

有人会问，楼主怎么不把代码贴出来？

嘿嘿 就是了防止那些直接拷代码的人。