本文利用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个阶段,在不同的阶段运用颜色的透明度制作出不同的阴影效果。
- #load5,
- #loader5 {
- margin: 80px 50px;
- float: left;
- font-size: 25px;
- width: 1em;
- height: 1em;
- border-radius: 50%;
- position: relative;
- text-indent: -9999em;
- -webkit-animation: load5 1.1s infinite ease;
- animation: load5 1.1s infinite ease;
- }
- @-webkit-keyframes load5 {
- 0%,
- 100% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);
- }
- 12.5% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);
- }
- 25% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 37.5% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),
- 2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 50% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),
- 0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 62.5% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 75% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),
- -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 87.5% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);
- }
- }
- @keyframes load5 {
- 0%,
- 100% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);
- }
- 12.5% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);
- }
- 25% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 37.5% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),
- 2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 50% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),
- 0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 62.5% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 75% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),
- -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);
- }
- 87.5% {
- box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),
- 2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),
- 0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),
- -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);
- }
- }
以上就是本文的全部内容,希望对大家学习实现CSS粒子旋转加载动画有所启发。
CSS,粒子旋转,加载动画
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]