用递归 mixin 生成 0%–100% 旋转帧：.gen-rotate-frames(@i: 0, @step: 10, @max: 100) when (@i =

如何用 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 =< @max) {
  @{i}% { transform: rotate(@i * 3.6deg); }
  .gen-rotate-frames((@i + @step), @step, @max);
}

注意：@i * 3.6 是为了让 100 步对应 360°（即每 1% 对应 3.6°），你也可以改成固定角度增量（如每帧 +10°，那就要按需调整百分比步长）。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 调用方式：.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();
}
}

然后在元素上直接用：.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 预生成最稳。