电脑
sublime text编辑器
loading效果图这就是我们要实现的css3 loading效果，也是很常用的一个加载效果；如图所示，白色圆圈会不断绕圈移动。
配置html页面因为此动画主要由css3样式实现，首先需搭建好html，目前我们需要一个div容器和一个div实现动画。
配置css外部样式在页面中加上外部链接样式。style.css主要是一些reset样式，也可以不用加。load.css是主要实现动画css文件。
box-shadow展现十圆点接下来就是实现 @keyframes动画，首先我们用box-shadow方法去实现，在0%的位置固定10个圆点，统一用白色透明度0.2的值去设置。@keyframes load { 0%{ box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); }}
确定动画阶段以此类推，确定各动画阶段，我们在12.5% 、25%、 37.5%、50% 、62.5%、75%、87.5%分别展示圆圈。
展现白色圆点然后我们在各个阶段，将对应阶段要展示的白色非透明圆点（1透明度）和浅白色圆点（0.7透明度）还有0.5透明度的圆点展示出来，其它依旧为白色透明（0.2透明度）。例如：0%开始设置第一个圆点为白色； 12.5%开始设置第二圆点为白色，第一个圆点为0.7透明度；25%开始设置第三圆点为白色，第二个圆点为0.7透明度，第一个圆点为0.75透明度。以此类推
循环不间断设置好上面的步骤，我们的动画就基本完成了，因为动画是循环转动的，所以我们在0%的阶段加上100%，让0%和100%的动画刚好重合在一起。
大功告成至此，css3 loading动画完成了。在你的项目中加进去吧~