借助CSS提供的animation与transform及filter滤镜等属性，咱们可使用CSS设置出精美的动画效果，进一步可使用CSS对HTML页面基本元素、图标等进行动画设计，如按钮效果，页面加载图标等。本文主要介绍加载图标动画设计，并进行实例分析。html
CSS加载动画设计web
实现要求及展现
本例设计实现自动旋转的加载图标设计，在图标旋转过程当中，动态改变颜色与状态，实现效果以下所示：布局
动态加载loading设计效果flex
基本语法说明
本例设计效果描述如上所示，一方面须要实现旋转效果，另外一方面须要实现颜色变化，所需掌握知识点主要包括CSS滤镜filter，动画属性animation与@keyframes关键帧的定义等。各种所需基本语法说明以下：动画
一、flex布局spa
经过使用flex布局实现动画层在web页面中进行布局与定位，本例应用到justify-content属性与设计
align-items属性实现动画层在页面水平与垂直方向进行居中显示。orm
二、before与after伪元素htm
伪元素是在html文件代码中不存在的元素，可是其可以在网页浏览时表现出行为与效果，与真实存在的元素相似。其中before指在元素前加入的内容，after表示在元素后加入的内容。如咱们在页面中定义一个DIV层，则可以使用before在前前添加新的内容，显示不一样效果。代码以下：blog
before元素使用实例
在该实例中咱们在dv表示的层以前添加了一个新的层效果，即.dv:before所定义的部分，页面实际代码中只有一个黄色层，生成的伪元素层为绿色层，实现效果以下：
伪元素层效果
三、线性渐变与透明度渐变
CSS提供元素原色的渐变效果，主要渐变类型包括径向渐变与线性渐变。本例须要使用线性渐变实现背景效果。线性渐变（Linear Gradients）能够实现颜色渐变、透明的渐变等。如：
linear-gradient(0deg, blue, green 40%, red);
表示:从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束;将其应用到咱们伪元素定义案例中则可呈现以下效果：
伪元素层渐变效果
除使用以上方法实现渐变以外，还能够对透明度进行渐变设置，须要使用transparent参数表示透明。如：
linear-gradient(0deg,transparent,transparent 40%,red);则表示按照透明度进行渐变；
透明线性渐变效果以下图所示：
现性渐变效果展现
四、圆形DIV与边缘模糊设置
圆形DIV主要经过border-radius属性设置，当其值设置为50%时便可造成圆形，边缘模糊主要经过滤镜filter实现。使用blur()设置高斯模糊。实例效果以下所示：
圆形div与高斯模糊
本例实现效果描述如上图所示，其中外层div设置radius为50%，内层绿色部分设置高斯模糊。
五、动画与旋转基本知识
动画效果主要经过animation属性与@keyframes进行设置，前文已经进行了说明，本文再也不详细说明，如需阅读，请自行查阅。
实现代码描述
旋转的加载动态效果基于以上基本语法进行设计与开发，实现主要代码表述以下：
本例实现完整代码