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

时间:2021-05-08

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

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章