纯css可实现丝滑轻量转圈加载动画：用border+border-radius+transform:rotate()组合，设单边实色其余半透明形成缺口，配合@keyframes匀速旋转；需注意兼容性、gpu加速及display/visibility切换差异。
纯 CSS 就能做出丝滑、轻量、可定制的转圈加载动画，不需要 JS 控制启停，也不依赖第三方库。关键在边框 + 旋转 + 半透明缺口的组合，浏览器原生支持，手机端也稳。
用 border + border-radius + animation 做最简 spinner
这是最常用也最可靠的方案：画一个正方形 div，加等宽边框，把其中一边设为实色，其余三边半透明，再用 @keyframes 驱动 transform: rotate()。
-
border-radius: 50%是必须的，否则圆不起来 -
border-top-color（或border-right-color）要单独设，形成视觉“缺口”，这是旋转感的来源 -
animation: spin 1s linear infinite中的1s可调快慢；linear保证匀速，避免卡顿感 - 别漏掉
display: inline-block或block，否则width/height在某些场景下可能不生效
示例代码：
.loader {
width: 32px;
height: 32px;
border: 3px solid rgba(0,0,0,0.1);
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
为什么 transform: rotate() 比 animation: rotation 更靠谱
CSS 没有 rotation 这个 animation 属性，常见错误是搜到过时教程写 animation: rotation 1s infinite —— 浏览器直接忽略，动画不跑。
- 必须用
transform: rotate()配合@keyframes，这是唯一标准写法 - 移动端要注意加
-webkit-transform兼容旧版 Safari，但现代 iOS 已基本不需要 - 想让动画更顺，加
will-change: transform或transform: translateZ(0)强制 GPU 加速，尤其在低端安卓机上明显 - 避免在
rotate()同时操作left/top等布局属性，会触发重排，掉帧
控制显示/隐藏时，display: none 和 visibility: hidden 怎么选
两者行为差异很大，选错会导致动画重置或布局跳动。
-
display: none会彻底移出渲染流，下次显示时动画从头开始播 —— 适合“请求开始→显示→请求结束→隐藏”这种明确生命周期 -
visibility: hidden保留占位，动画暂停但状态保留，显示时继续播 —— 适合需要保持动画连续性的场景（比如长轮询中反复闪现） - 更稳妥的做法是用
opacity: 0+pointer-events: none，视觉隐藏且不打断动画，还能避免焦点丢失问题 - JS 切换时，别直接操作
style.display，用 class 切换更可控：element.classList.toggle('is-loading')
颜色、大小、速度全靠改 CSS，但这些值容易被忽略
看似自由调整，实际几个参数互相牵制：
-
border-width和width/height要匹配：比如width: 40px+border: 4px，实际内容区只剩 32×32，太小会糊 - 主色建议用
hsl()或rgba()，方便后期一键换主题色或调节透明度 -
animation-duration小于 0.6s 容易眼花，大于 1.5s 会让用户觉得“卡住了”，0.8–1.2s 是舒适区间 - 如果页面有深色背景，别只改
border-top-color，记得同步调border-color的 alpha 值，否则底边框会透出难看灰边
真正难的不是写出来，而是让 spinner 在各种屏幕密度、缩放比例、暗黑模式下都保持清晰不糊、不偏心、不闪烁 —— 这些细节得一个个在真机上点开开发者工具调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
