LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

SpinKit,一款神奇的 CSS 开源加载动画旋转器

admin
2024年10月12日 10:13 本文热度 340
  • • Github Star: 19.3k[1]

  • • 官网[2]

SpinKit 是什么?

SpinKit 是基于 CSS3 的加载动画库,仅使用 transform 和 opacity 来创建流畅且易用的动画。他利用 CSS3 动画的强大功能,创建了一系列流畅、易于定制的动画效果。接下来,我们将一起讨论下 SpinKit 的使用方法和应用场景。

SpinKit 的主要特点在于它的简洁性和易用性。它不仅提供了多种风格的动画效果,而每种动画都能通过简单的 HTML 和 CSS 代码轻松集成到项目。另外,通过学习 SpinKit 源码实现,可以更好学习和应用 CSS3 。

如上图所示,SpinKit 提供 12 种动画效果。

快速开始

在项目中使用 SpinKit 是比较方便的,可以通过 npm 安装也可以直接下载源码到项目中。

npm install spinkit

引入 spinkit.css 或者 spinkit.min.css 即可。

 <div class="example">
    <div class="sk-chase">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>
  </div>

默认情况下,加载器的 width 和 height 均是 40pxbackground-color 是 #333。通过覆盖 --sk-size 调整宽高 --sk-color 调整背景色。

:root {
    --sk-color#fff; // 设置为白色
}
.example {
  padding10px;
  background-color#1abc9c;
}

效果如下:

实现原理

SpinKit 追逐点加载动画实现源码:

/* 定义追逐动画的容器样式 */
.sk-chase {
  width40px;
  height40px;
  position: relative; /* 将元素定位为相对定位,以便绝对定位的子元素可以基于此元素定位 */
  animation: sk-chase 2.5s infinite linear both; /* 应用名为sk-chase的动画,持续2.5秒,无限循环,线性时间函数,动画前后状态都保留 */
}
/* 定义追逐点的样式 */
.sk-chase-dot {
  width100%;
  height100%;
  position: absolute; /* 将元素定位为绝对定位,相对于其最近的已定位(非static)祖先元素定位 */
  left0;
  top0/* 将点定位到容器的左上角 */
  animation: sk-chase-dot 2.0s infinite ease-in-out both; /* 应用名为sk-chase-dot的动画,持续2秒,无限循环,ease-in-out时间函数,动画前后状态都保留 */
}
/* 定义追逐点的伪元素样式 */
.sk-chase-dot:before {
  content''/* 创建一个伪元素 */
  display: block; /* 使伪元素显示为块级元素 */
  width25%;
  height25%;
  background-color#fff/* 设置伪元素的背景颜色为白色 */
  border-radius100%/* 设置伪元素的边框为圆形 */
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both; /* 应用名为sk-chase-dot-before的动画,持续2秒,无限循环,ease-in-out时间函数,动画前后状态都保留 */
}
/* 为每个追逐点设置不同的动画延迟,以创建连续的动画效果 */
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
/* ... 其他点的动画延迟设置类似,逐渐减少以创建追逐效果 */
/* 定义sk-chase动画的关键帧 */
@keyframes sk-chase {
  100% { transformrotate(360deg); } /* 动画结束时,元素旋转360度 */
}
/* 定义sk-chase-dot动画的关键帧 */
@keyframes sk-chase-dot {
  80%100% { transformrotate(360deg); } /* 动画的80%至100%时间,元素旋转360度 */
}
/* 定义sk-chase-dot-before动画的关键帧 */
@keyframes sk-chase-dot-before {
  50% {
    transformscale(0.4); /* 动画的50%时间,伪元素缩小到原来的40% */
  } 
  100%0% {
    transformscale(1.0); /* 动画的开始和结束时,伪元素恢复到原始大小 */
  } 
}

更多实现细节,请参考源码。

总结

SpinKit 以其简洁的设计、多样的动画样式和易于集成的特点,成为优化用户体验的首选加载动画库。无论是在网页还是在移动应用中,SpinKit 都能够有效地传达加载状态,减少用户的等待焦虑,增强应用的专业感和吸引力。希望本文的分享对你有帮助。

祝好!

引用链接

[1] Github Star: 19.3k: https://github.com/tobiasahlin/SpinKit
[2] 官网: https://tobiasahlin.com/spinkit/


该文章在 2024/10/12 10:13:18 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved