CSS中Less实现无限旋转Loading动画方法

本文深入讲解了如何利用 Less 的递归 mixin 技巧高效生成无限旋转的 Loading 动画，巧妙绕过 Less 无法在 @keyframes 内部直接调用 mixin 的限制，通过预编译方式自动生成 0%–100% 的 transform: rotate 帧序列，支持灵活配置步长、角度、时长、颜色与尺寸；同时对比剖析了纯 CSS/Less 方案相比 JavaScript 动态注入 keyframes 的显著优势——更轻量、更稳定、更易 SSR 支持、无 FOUC 风险且调试直观，真正实现高性能、可复用、工程友好的加载动画开发实践。

如何用 Less 生成无限旋转的 @keyframes 动画

Less 本身不执行动画，它只是编译时预处理器；真正起作用的是编译后输出的 CSS @keyframes 规则。关键在于：用 Less 的循环（.loop() 或递归 mixin）生成从 0% 到 100% 的旋转帧，避免手写冗余代码。

常见错误是直接在 @keyframes 内部调用 Less 循环——这不行，因为 @keyframes 是 CSS 规则块，Less 不允许在其中嵌套 mixin 调用。正确做法是：先用 mixin 生成完整帧规则字符串，再注入到 @keyframes 中。

• 使用递归 mixin 模拟 for 循环，控制步长（如每 10% 一帧）
• 用 ~"rotate(@{deg}deg)" 做字符串拼接，避免引号被转义
• 必须把整个 @keyframes 块包裹在 mixin 外部，不能在 @keyframes 体内展开 mixin

递归 mixin 实现 0%–100% 逐帧旋转

Less 没有原生 for，靠递归 + guard 实现计数。下面这个 mixin 会生成 0%, 10%, 20%, ..., 100% 的旋转声明：

.gen-rotate-frames(@i: 0, @step: 10, @max: 100) when (@i =<p>注意：<code>@i * 3.6</code> 是为了让 100 步对应 360°（即每 1% 对应 3.6°），你也可以改成固定角度增量（如每帧 +10°，那就要按需调整百分比步长）。</p>

• 调用方式：.gen-rotate-frames(); —— 默认每 10% 一帧，共 11 帧（0–100）
• 不要试图在 @keyframes 内部调用它，而要把它作为子规则写在 @keyframes 块里
• Less 编译器会把所有匹配的 @{i}% { ... } 展开为标准 CSS 帧

完整可用的 Loading 动画 mixin

把帧生成和动画应用封装成可复用的 mixin，支持自定义颜色、尺寸、持续时间：

.loading-spin(@duration: 1s, @size: 24px, @color: #007bff) {
  display: inline-block;
  width: @size;
  height: @size;
  border: 2px solid @color;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin @duration linear infinite;
<p>@keyframes spin {
.gen-rotate-frames();
}
}
</p>

然后在元素上直接用：.loading-spin(0.8s, 20px, #6c757d);

• 这里用了 border + border-top-color: transparent 实现经典圆圈旋转，比 transform: rotate() 全图旋转更轻量
• 如果真要用全元素旋转（比如一个图标），把 border 替换为 background，并确保 transform-origin 在中心
• 注意：某些旧版 Less（@keyframes 内直接展开 mixin，此时需把 @keyframes 单独提出来，用变量名引用

为什么不用 JavaScript 动态生成 keyframes？

能用纯 CSS/Less 解决的，就别碰 JS。动态插入 CSSRule 或 document.styleSheets 修改虽然可行，但带来额外复杂度：

• SSR 场景下服务端 Less 编译无法执行 JS，会导致首屏无动画
• 样式表注入时机难控，容易触发重排或 FOUC
• 调试困难：Chrome DevTools 看不到动态生成的 @keyframes 名称
• 绝大多数 Loading 动画参数固定，没必要 runtime 构建

真正需要 JS 的场景只有两个：动画速度/颜色由用户实时调节；或帧数据来自接口（比如 SVG 路径动画）。其他情况，Less 预生成最稳。

终于介绍完啦！小伙伴们，这篇关于《CSS中Less实现无限旋转Loading动画方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！