本文利用CSS实现大小相同、颜色深浅不一的粒子旋转加载动画，供大家参考，具体内容如下。

animation属性设置的参数：

● 设置对象所应用的动画名称：load5。

● 设置对象动画的持续时间：1.1s。

● 设置对象动画的过渡类型：

ease：动画以低速开始，然后加快，在结束前变慢。

linear：匀速。

ease-in：动画以低速开始。

ease-out：动画以低速结束。

ease-in-out：动画以低速开始和结束，相对于ease缓慢，速度更均匀。

step-start：按keyframes设置逐帧显示，第一帧为keyframes设置的第一帧。

step-end：按keyframes设置逐帧显示，第一帧为样式的初始值。

steps(<number>[, [ start | end ] ]?)：把keyframes里设置的一帧等分为几帧，start为第一次显示第一帧，end第一次显示样式的初始值，例如：steps(4,start)。

cubic-bezier(<number>, <number>, <number>, <number>)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。贝兹曲线限制了首尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常用的动画效果。

● 设置对象动画的循环次数：infinite（无限循环）。

将动画运行整个过程的分为0%，12.5%，25%，37.5%，50%，62.5%，75%，87.5%，100%这8个阶段，在不同的阶段运用颜色的透明度制作出不同的阴影效果。

CSS Code复制内容到剪贴板 #load5, #loader5{ margin:80px50px; float:left; font-size:25px; width:1em; height:1em; border-radius:50%; position:relative; text-indent:-9999em; -webkit-animation:load51.1sinfiniteease; animation:load51.1sinfiniteease; } @-webkit-keyframesload5{ 0%, 100%{ box-shadow:0-2.6em00rgba(128,0,255,1),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.2), -2.6em000rgba(128,0,255,0.5),-1.8em-1.8em00rgba(128,0,255,0.7); } 12.5%{ box-shadow:0-2.6em00rgba(128,0,255,0.7),1.8em-1.8em00rgba(128,0,255,1), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.2), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.5); } 25%{ box-shadow:0-2.6em00rgba(128,0,255,0.5),1.8em-1.8em00rgba(128,0,255,0.7), 2.5em000rgba(128,0,255,0.5),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.2), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.2); } 37.5%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00emrgba(128,0,255,0.5), 2.5em0em00rgba(128,0,255,0.7),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.2), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.2); } 50%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.5),1.75em1.75em00rgba(128,0,255,0.7), 02.5em00rgba(128,0,255,1),-1.8em1.8em00rgba(128,255,0,0.2), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.2); } 62.5%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.5), 02.5em00rgba(128,0,255,0.7),-1.8em1.8em00rgba(128,0,255,1), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.2); } 75%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.5),-1.8em1.8em00rgba(128,0,255,0.7), -2.6em000rgba(128,0,255,1),-1.8em-1.8em00rgba(128,0,255,0.2); } 87.5%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.5), -2.6em000rgba(128,0,255,0.7),-1.8em-1.8em00rgba(128,0,255,1); } } @keyframesload5{ 0%, 100%{ box-shadow:0-2.6em00rgba(128,0,255,1),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.2), -2.6em000rgba(128,0,255,0.5),-1.8em-1.8em00rgba(128,0,255,0.7); } 12.5%{ box-shadow:0-2.6em00rgba(128,0,255,0.7),1.8em-1.8em00rgba(128,0,255,1), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.2), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.5); } 25%{ box-shadow:0-2.6em00rgba(128,0,255,0.5),1.8em-1.8em00rgba(128,0,255,0.7), 2.5em000rgba(128,0,255,0.5),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.2), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.2); } 37.5%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00emrgba(128,0,255,0.5), 2.5em0em00rgba(128,0,255,0.7),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.2), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.2); } 50%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.5),1.75em1.75em00rgba(128,0,255,0.7), 02.5em00rgba(128,0,255,1),-1.8em1.8em00rgba(128,255,0,0.2), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.2); } 62.5%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.5), 02.5em00rgba(128,0,255,0.7),-1.8em1.8em00rgba(128,0,255,1), -2.6em000rgba(128,0,255,0.2),-1.8em-1.8em00rgba(128,0,255,0.2); } 75%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.5),-1.8em1.8em00rgba(128,0,255,0.7), -2.6em000rgba(128,0,255,1),-1.8em-1.8em00rgba(128,0,255,0.2); } 87.5%{ box-shadow:0-2.6em00rgba(128,0,255,0.2),1.8em-1.8em00rgba(128,0,255,0.2), 2.5em000rgba(128,0,255,0.2),1.75em1.75em00rgba(128,0,255,0.2), 02.5em00rgba(128,0,255,0.2),-1.8em1.8em00rgba(128,0,255,0.5), -2.6em000rgba(128,0,255,0.7),-1.8em-1.8em00rgba(128,0,255,1); } }

以上就是本文的全部内容，希望对大家学习实现CSS粒子旋转加载动画有所启发。

【CSS实现大小相同、颜色深浅不一的粒子旋转加载动画】相关文章：

★ 任意图片实现垂直居中的三种方法(兼容性还不错)

★ DIV+CSS垂直居中一个浮动元素

★ CSS控制用户浏览网页的光标

★ 实现div垂直居中的display:table-cell方法示例介绍

★ 用CSS实现简单的进度条

★ CSS在表格边框上的美学应用

★ CSS实现样式布局的锦囊妙计22招

★ CSS:div 实现长英文字母自动换行CSS

★ CSS实现让同一行文字和输入框对齐的方法

★ CSS掌握定位的盒子模式