深圳市圣锐精密模具制品有限公司

今天小编跟大家讲解下有关CSS实现大小相同、颜色深浅不一的粒子旋转加载动画 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关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 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粒子旋转加载动画有所启发。

来源：爱蒂网