CSS实现大小相同、颜色深浅不一的粒子旋转加载动画
CSS实现大小相同、颜色深浅不一的粒子旋转加载动画
发布时间:2017-01-07 来源:查字典编辑
摘要:本文利用CSS实现大小相同、颜色深浅不一的粒子旋转加载动画,供大家参考,具体内容如下。animation属性设置的参数:●设置对象所应用的动...

本文利用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实现大小相同、颜色深浅不一的粒子旋转加载动画1

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类