使用@keyframes定义0%→359deg旋转动画，配合animation: spin 1s linear infinite、will-change: transform及rem尺寸，确保移动端平滑无限加载。
用 @keyframes 写一个平滑旋转的加载圈
移动端无限加载转圈，核心就是让一个元素持续、无卡顿地旋转。CSS 里最可靠的方式是用 @keyframes 定义 0% → 100% 的 transform: rotate() 变化，再配合 animation 属性启动它。
常见错误是直接写 rotate(360deg)，但浏览器可能优化掉“整圈”动画，导致首帧跳变或偶发停顿；正确做法是用 rotate(0deg) → rotate(359deg) 避开渲染引擎对 360° 的特殊处理。
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } }- 动画时长建议设为
0.8s～1.2s：太短（如0.3s）在低端安卓上易丢帧；太长（如2s）会让用户觉得“卡住” - 必须加
animation-timing-function: linear，否则默认ease会让转速不均，视觉上像“一顿一顿”
适配不同尺寸屏幕的 loading 圈大小与位置
移动端设备像素比（dpr）和视口宽度差异大，纯用 px 写宽高容易在 iPhone SE 或折叠屏上显得过大或过小。
关键不是“响应式”，而是“物理尺寸稳定”：用户希望加载圈在手指可点区域里清晰可见，又不遮挡太多内容。用 rem 或 vh 是更稳妥的选择。
- 推荐尺寸：
width: 1.6rem; height: 1.6rem;（约 24px @ 16px root font-size），兼顾清晰度与轻量感 - 避免用
%相对于父容器——如果父容器高度为auto，height: 10%会失效 - 居中建议用
margin: 0 auto;+display: block;，而不是flex或position: absolute，减少布局重排风险
真机上动画卡顿或突然暂停的三个原因
开发时在 Chrome DevTools 模拟器里很顺，一上真机就掉帧，大概率不是代码问题，而是浏览器主动降频或 CSS 属性触发了非合成层渲染。
Android WebView 和部分 iOS Safari 版本对 transform 的硬件加速支持不稳定，尤其当元素有 box-shadow、border-radius 或透明度变化时。
- 必须加
will-change: transform;，告诉浏览器“这个元素要动”，提前分配图层 - 禁用
border或改用outline：某些安卓 10/11 系统下，带border的旋转元素会强制回退到 CPU 渲染 - 避免同时动画多个属性：比如一边
rotate一边opacity，iOS 15 以下可能触发 layout → paint → composite 全流程，而非仅 composite
如何让加载圈在 Vue/React 组件里干净复用
不是封装成独立组件，而是做成一个可复用的 class 块，方便嵌入任意 DOM 结构，不绑定框架生命周期。
重点在于“不侵入业务逻辑”：loading 圈只负责视觉表现，显隐由外部控制，自身不管理状态。
- 定义基础类：
.loading-spinner { width: 1.6rem; height: 1.6rem; border: 2px solid #ccc; border-top-color: #007bff; border-radius: 50%; animation: spin 1s linear infinite; will-change: transform; } - 显隐用
display: none控制，不用visibility: hidden——后者仍占渲染树，可能影响滚动性能 - 如果项目用了 CSS-in-JS（如 styled-components），确保
@keyframes提前注入全局，否则 SSR 或首次渲染时动画不触发
focusin 后手动重置 animation 的 play-state，或者换用 SVG stroke-dashoffset 方案绕过这个问题。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
