CSS实现大小相同、颜色深浅不一的粒子旋转加载

本文利用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粒子旋转加载动画有所启发。