如何使用纯CSS Animation实现Spin.js风格的Line Spinner？

当然可以！纯CSS动画完全能复刻Spin.js里Line Spinner的旋转线条加载效果，甚至能通过调整参数实现更贴合需求的动态表现。下面我直接给你可复用的代码和详细解释：

实现代码 #

HTML结构 #

<div class="line-spinner"></div>

CSS样式 #

/* 加载器容器：控制整体尺寸、位置 */
.line-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 50px auto; /* 示例居中，可根据需求调整 */
}

/* 旋转线条：用伪元素绘制，避免额外HTML标签 */
.line-spinner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 2px;
  background-color: #3498db; /* 自定义线条颜色 */
  transform-origin: left center; /* 关键：设置旋转中心为线条左侧端点（容器中心位置） */
  animation: line-spin 1s linear infinite;
}

/* 核心旋转动画：加入透明度变化增强动感 */
@keyframes line-spin {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

效果优化（可选） #

如果想要更接近Spin.js的动态质感，可以给动画加入线条缩放的变化，让旋转过程中线条有轻微的长短变化：

@keyframes line-spin {
  0% {
    transform: rotate(0deg) scaleX(1);
    opacity: 1;
  }
  25% {
    transform: rotate(90deg) scaleX(0.8);
    opacity: 0.7;
  }
  50% {
    transform: rotate(180deg) scaleX(1);
    opacity: 1;
  }
  75% {
    transform: rotate(270deg) scaleX(0.8);
    opacity: 0.7;
  }
  100% {
    transform: rotate(360deg) scaleX(1);
    opacity: 1;
  }
}

关键原理说明 #

• 旋转中心控制：通过transform-origin: left center让线条以自身左侧端点为旋转轴，而这个端点刚好位于容器的中心位置，实现绕中心旋转的效果。
• 纯CSS动画：利用@keyframes定义旋转、透明度、缩放的过渡动画，通过linear infinite设置匀速循环播放，完全不需要JavaScript参与。

内容的提问来源于stack exchange，提问作者developer