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