整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
助CSS提供的animation与transform及filter滤镜等属性，我们可以使用CSS设置出精美的动画效果，进一步可以使用CSS对HTML页面基本元素、图标等进行动画设计，如按钮效果，页面加载图标等。本文主要介绍加载图标动画设计，并进行实例分析。
CSS加载动画设计
本例设计实现自动旋转的加载图标设计，在图标旋转过程中，动态改变颜色与状态，实现效果如下所示：
动态加载loading设计效果
本例设计效果描述如上所示，一方面需要实现旋转效果，另一方面需要实现颜色变化，所需掌握知识点主要包括CSS滤镜filter，动画属性animation与@keyframes关键帧的定义等。各类所需基本语法说明如下：
1、flex布局
通过使用flex布局实现动画层在web页面中进行布局与定位，本例应用到justify-content属性与
align-items属性实现动画层在页面水平与垂直方向进行居中显示。
2、before与after伪元素
伪元素是在html文件代码中不存在的元素，但是其能够在网页浏览时表现出行为与效果，与真实存在的元素类似。其中before指在元素前加入的内容，after表示在元素后加入的内容。如我们在页面中定义一个DIV层，则可使用before在前前添加新的内容，显示不同效果。代码如下：
before元素使用实例
在该实例中我们在dv表示的层之前添加了一个新的层效果，即.dv:before所定义的部分，页面实际代码中只有一个黄色层，生成的伪元素层为绿色层，实现效果如下：
伪元素层效果
3、线性渐变与透明度渐变
CSS提供元素原色的渐变效果，主要渐变类型包括径向渐变与线性渐变。本例需要使用线性渐变实现背景效果。线性渐变（Linear Gradients）可以实现颜色渐变、透明的渐变等。如：
linear-gradient(0deg, blue, green 40%, red);
表示:从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束;将其应用到我们伪元素定义案例中则可呈现如下效果：
伪元素层渐变效果
除使用以上方法实现渐变之外，还可以对透明度进行渐变设置，需要使用transparent参数表示透明。如：
linear-gradient(0deg,transparent,transparent 40%,red);则表示按照透明度进行渐变；
透明线性渐变效果如下图所示：
现性渐变效果展示
4、圆形DIV与边缘模糊设置
圆形DIV主要通过border-radius属性设置，当其值设置为50%时即可形成圆形，边缘模糊主要通过滤镜filter实现。使用blur()设置高斯模糊。实例效果如下所示：
圆形div与高斯模糊
本例实现效果描述如上图所示，其中外层div设置radius为50%，内层绿色部分设置高斯模糊。
5、动画与旋转基本知识
动画效果主要通过animation属性与@keyframes进行设置，前文已经进行了说明，本文不再详细说明，如需阅读，请自行查阅。
旋转的加载动态效果基于以上基本语法进行设计与开发，实现主要代码表述如下：
本例实现完整代码
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！
http://jsfiddle.net/rd4L30m8/
甜甜圈动画
甜甜圈动画
http://jsfiddle.net/rd4L30m8/1/
大小圆点
大小圆点
http://jsfiddle.net/rd4L30m8/2/
波浪动画
波浪动画
http://jsfiddle.net/rd4L30m8/3/
翻转动画
翻转动画
http://jsfiddle.net/rd4L30m8/4/
弹跳动画
弹跳动画
然互联网的连接速度已经变得越来越快，但是在登录一些网站时，难免会出现等待网页的加载的时候。而设计师们也挖空心思的使用各种创意动画，让你的等待时间变得有趣，不至于很痛苦。
加载程序显示了进程正在运行。然而，为了确保你在等待完成加载的过程前不会离开，加载程序的秘密就在于那些注意细节的有趣动画。在本文中，你会发现 20 个很棒的加载动画，供你选择与参考。同时，你可以将它们下载并使用在自己的网站或项目上。
一起来 Enjoy 吧！
译者注： 以下 20 个加载动画，均来自 CodePen.
作者：@CKH4
这是一个利用 Slim+CSS 预处理器 Stylus 实现的简单动画。作者写代码很精炼、简洁。
作者：@jackrugile
为客户端改良的纯 CSS 实现的彩虹加载动画。
作者：@mr_alien
为了将用户重新定向到另一个页面，而利用 HTML+CSS 实现的加载动画。
作者：@mattiabericchia
纯 CSS 实现的循环加载动画。
作者：@jackrugile
CSS+JS 实现的艳丽火花效果的 Canvas 加载动画。
作者：@jonathansilva
用 CSS3 和 Html 制作的无限加载动画。
作者：@ispal
纯 CSS 实现的楼梯循环加载动画。
作者：@code_dependant
Haml+Sass 实现的循环加载动画。
作者：@majci23
纯 CSS 实现的循环加载动画。
作者：@FilipVitas
HTML +Sass 实现的魔方加载动画。
作者：@rss
由 Mikael Edwards 设计并由 RızaSelçukSaydam 为 Peeek 开发的加载动画。利用 Haml + SCSS 实现的。
作者：@dghez
纯 SCSS 实现的正方形加载动画。
作者：@MarcMalignan
利用 CSS 与少量的 jQuery 实现的鸡尾酒加载动画。
作者：@TheDutchCoder
灵感启发！一个纯 CSS 实现的 iMac/iPad/iPhone 变换加载动画。
作者：@dan_reid
受到 polygon.com 网站启发制作的加载动画，利用 Haml+SCSS 实现的。
作者：@depy
一款纯 CSS 加载动画，创意还是蛮有意思的。
作者：@tstoik
利用 SCSS 写的很酷的加载动画。
作者：@samueljweb
利用棍状图形实现的加载动画。
作者：@tomchewitt
纯 CSS 实现的有趣的加载动画。
作者：@redouglas
一个简单的旋转加载动画。
如果觉得文章不错，不妨点个赞。^_^
注：
本文在翻译的基础上，补充了相应的解释。或许能对你起到参考与帮助的作用；
本文版权归原作者所有。如需转载译文，烦请注明出处，谢谢！
由于头条号暂不支持站外跳转，想了解详细项目的朋友，可以浏览器中打开
此地址：http://t.cn/RIX6QyW
英文原文：20 Awesome Animated Loaders and Spinners
作者： Nancy Young
译者：IT程序狮
译文源自：http://www.jianshu.com/p/6d3aafe8240f
推荐！设计师与程序员不能错过的 10 个酷站
CodePen上值得关注的 7 款 CSS 动画
超赞！37款免费的 HTML5 和 CSS3 加载与预载动画
2017 年你应该学习的编程语言、框架和工具
*请认真填写需求信息，我们会在24小时内与您取得联系。
