conic-gradient 与 mask 无法直接动画角度，因 css 动画引擎不解析 mask-image 内部变量；需拆分为 radial-gradient 遮罩层 + conic-gradient 背景层，通过 background-position 或 transform 旋转背景实现边框动画。
conic-gradient + mask 为什么不能直接动画 from 角度
因为 mask 属性把渐变当静态图像处理，浏览器不会监听 from var(--rotate) 的变化并重绘——哪怕你用 @keyframes 改变量，边框也静止或全黑。这不是写法问题，是规范限制：CSS 动画引擎不解析 mask-image 内部的 CSS 变量。常见错误就是写 mask: conic-gradient(from var(--rotate), ...) 然后配 animation，结果毫无反应。
真正能动的最小结构：radial-gradient 遮罩 + conic-gradient 背景
必须拆开两层：一层是固定形状的遮罩（控制“哪里显示”），一层是旋转的渐变（提供颜色）。关键不是转 mask，而是转背景本身，并靠遮罩抠出边框区域。
-
-webkit-mask和mask都要写，Safari 旧版只认前者 - 遮罩推荐用
radial-gradient(farthest-side, transparent 85%, black 85%)，85%控制边框粗细，太小易断，太大显臃肿 - 背景用
conic-gradient(#3b82f6, #8b5cf6, #ec4899)，别加from—— 后续靠background-position或transform驱动旋转 - 元素需设
border-radius: 50%（圆环）或border-radius: 8px（圆角矩形），否则遮罩对不齐
让边框“跑起来”的两种可靠方式
不要碰 mask 的角度动画，只动背景层：
- 方案一（推荐）：用
background-size: 200% 200%+background-position: 50% 50%+animation: spin 3s linear infinite，再在@keyframes spin里改background-position。注意 Chrome 对background-position+conic-gradient动画支持不稳定，iOS Safari 易跳帧 - 方案二（更稳）：不对背景位置动，而是给整个元素加
transform: rotate(360deg)动画，同时background: conic-gradient(...)设为background-attachment: fixed。这样视觉上是边框在转，实际是容器在旋，兼容性更好
容易被忽略的三个硬性条件
漏掉任意一个，动画就失效或错位：
- 必须显式声明
box-sizing: border-box，否则padding/mask基准混乱 -
mask图像必须设尺寸，例如-webkit-mask-size: 100% 100%，否则 Safari 下遮罩偏移 - 如果元素有
padding或margin，mask默认作用于整个盒模型，得用mask-origin: border-box或mask-clip: border-box锚定范围
@keyframes。很多“不动”的问题，根源在遮罩没生效，而不是动画写错了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
