使用@keyframes定义0%到100%的完整旋转关键帧，配合animation简写属性、transform-origin精准控制中心，并添加will-change优化性能，可实现流畅可控的加载动画。
直接用 @keyframes 定义旋转关键帧，再通过 animation 应用到元素上，就能做出流畅、可控、性能好的旋转加载动画。核心不在“炫酷”本身，而在于旋转逻辑清晰、中心准确、触发稳定、不干扰布局。
定义旋转关键帧（必须写全起止状态）
用 @keyframes 明确写出从 0° 到 360° 的完整过程，浏览器才能平滑插值：
- 推荐写法：
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } - 也可用
from/to，但语义略弱，且无法扩展中间帧（比如加停顿或变速） - 避免只写
transform: rotate(360deg)—— 这不是动画，只是静态变形
应用动画并控制行为（时长、循环、速度曲线）
把关键帧绑定到元素时，建议写全 animation 简写属性，确保关键参数不遗漏：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
animation: spin 0.8s linear infinite;是最稳妥的写法 -
infinite必须显式声明，否则只转一圈就停 - 时长选 0.6–1.2s 较自然；太短易闪，太长显卡顿；线性（
linear）适合加载指示，ease-in-out更适合交互反馈
确保旋转中心准确（transform-origin 很关键）
默认旋转中心是元素盒模型中心（50% 50%），但若元素不是正方形、或用了 border 做环形，中心容易偏移：
- 圆环类加载器（如
border-radius: 50%）建议显式设transform-origin: center; - 图片或图标元素可加
display: block; margin: 0 auto;配合居中旋转 - 绕左上角转？写
transform-origin: 0 0;；绕右下角？写transform-origin: 100% 100%;
优化性能与视觉表现（让旋转更顺、更专业）
真实项目中，光“能转”不够，还要兼顾渲染效率和观感细节：
- 给旋转元素加
will-change: transform;（仅对频繁动画元素），提示浏览器提前启用 GPU 加速 - 避免在动画中修改
width、height、left、top等触发布局的属性 - 想增加层次感？可叠加
opacity脉冲、scale(0.95)→scale(1)微缩放，或用::before/::after做双层不同速旋转 - 颜色过渡更柔和？配合
border-color或background的渐变色动画，但注意别拖慢帧率
