CSS项目实战之加载中动画(Loader)_纯CSS绘制旋转特效

纯css旋转loader应使用@keyframes定义transform rotate动画，配合will-change: transform和rem+vw/min-max适配，严格遵循safari兼容写法，并强制支持prefers-reduced-motion降级。

怎么用纯CSS实现不卡顿的旋转Loader

浏览器主线程不阻塞，动画必须走 transform 和 opacity，其他属性（比如 width、background-position）会触发重排或低效重绘。直接上 @keyframes + animation 是最稳的路径。

• 只对 transform 做旋转：用 rotate(0deg) → rotate(360deg)，别用 border-radius 动画模拟“转圈”
• 加 will-change: transform 提前告诉浏览器这个元素要动，尤其在低端安卓 webview 里能明显减少掉帧
• 避免用 animation-timing-function: step-start 做“齿轮式”转动——它不是真正意义上的旋转动画，视觉卡顿且语义错误

CSS Loader 在 Safari 上不动？检查这三处

Safari（尤其是 ios 15 及更早）对 @keyframes 的解析比 chrome 更严格，常见静止现象基本是语法或兼容性问题。

• @keyframes 名称不能含大写字母或下划线，写成 loader-spin 没问题，但 LoaderSpin 或 loader_spin 在旧 Safari 里可能被忽略
• 必须显式声明 from 和 to，不能只写 0% 和 100% —— iOS Safari 14.5 之前有解析 bug
• 如果父容器用了 transform: scale(0.99) 这类非 1 缩放，某些 Safari 版本会禁用子元素的 transform 动画，临时加 transform: translateZ(0) 可绕过

如何让 Loader 大小适配不同设备又不模糊

用像素值（px）写宽高容易在高清屏上发虚，用 em 或 rem 又难控制绝对大小。折中方案是用 vw + min/max-width 锁死范围。

• 基础尺寸设为 width: 2rem; height: 2rem;，再用 min-width: 24px; max-width: 48px; 防止在极小或极大字体设置下失控
• 边框类 Loader（如环形）优先用 border: 2px solid 而非 box-shadow 模拟，后者在缩放时边缘易糊
• 如果用伪元素（::after）画圆环，确保 border-radius: 50% 后没被父容器的 overflow: hidden 截断——有些安卓 UC 浏览器会误裁切动画中的圆角

要不要加 prefers-reduced-motion 支持

要。不是“可选”，而是实际项目上线后用户反馈最多的无障碍问题之一：动画持续旋转引发眩晕，尤其在表单提交后长时间挂起时。

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

• 用 @media (prefers-reduced-motion: reduce) 把 animation 改成 animation: none 或降级为静态 loading 文字
• 别只停掉旋转，还要同步处理状态逻辑——比如 js 里监听 window.matchMedia('(prefers-reduced-motion)')，避免动画停了但遮罩层没关
• 测试时手动开启系统设置：macOS 系统设置 > 辅助功能 > 显示 > 减少运动；iOS 设置 > 辅助功能 > 动态效果 > 减少动态效果

真正难的不是画出那个圈，是让它在各种屏幕、各种系统、各种用户设置下都不出错——特别是 prefers-reduced-motion 这种一漏就整块不可用的点，上线前很容易被跳过。