SpinKit 简介

SpinKit 是一个基于 CSS3 的加载动画库，主要利用 transform 和 opacity 来创建流畅且易用的动画效果。它提供了多种动画样式，易于集成和自定义，非常适合在网页或移动应用中提升用户体验。

主要特点

• 简洁性：只需少量 HTML 和 CSS 代码即可实现多种动画效果。
• 易用性：通过简单的样式覆盖即可自定义动画的大小和颜色。
• 学习价值：通过源码学习，可以深入理解 CSS3 动画的实现方式。

快速开始

在项目中使用 SpinKit 可以通过以下方式进行：

1. 安装：

   npm install spinkit
   

2. 引入：

   <link rel="stylesheet" href="spinkit.min.css">
   

3. 示例代码：

   <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>
   

4. 自定义：

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

实现原理概述

SpinKit 的追逐动画使用了以下关键技术：

• 容器动画：通过 @keyframes 旋转容器，持续2.5秒的动画循环。
• 追逐点动画：每个点通过 @keyframes 进行缩放与旋转，并设置不同的延迟以实现连续的追逐效果。

核心代码：

.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  animation: sk-chase 2.5s infinite linear both;
}
.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
  content: '';
  display: block;
  width: 25%;
  height: 25%;
  background-color: #fff;
  border-radius: 100%;
  animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
@keyframes sk-chase {
  100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot {
  80%, 100% { transform: rotate(360deg); }
}
@keyframes sk-chase-dot-before {
  50% { transform: scale(0.4); }
  100%, 0% { transform: scale(1.0); }
}

总结

SpinKit 以其多样的动画样式和简单的集成方式，成为提升用户体验的理想工具。它能够有效地传达加载状态，减少用户的等待焦虑，增强应用的专业感和吸引力。

祝好！

引用链接

• Github Star: 19.3k
• 官网