借助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举行设置，前文已经举行了说明，本文不再详细说明，如需阅读，请自行查阅。实现代码形貌旋转的加载动态效果基于以上基本语法举行设计与开发，实现主要代码表述如下：本例实现完整代码本头条号恒久关注编程资讯分享；编程课程、素材、代码分享及编程培训。

如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多法式设计相关教程及实例分享，期待大家关注与阅读！。

本文来源：leyu乐鱼体育平台-www.yhamusement.com