纯css波点加载动画需用伪元素模拟圆点，通过差异化animation-delay和transform:scale()实现错峰呼吸效果，推荐5个点配合calc()动态设延迟、分档缩放值，并添加will-change:transform提升性能。
怎么用纯CSS实现波点加载动画（不依赖JS）
能，而且很简单。核心是用多个 :before 或 :after 伪元素模拟圆点，配合独立的 animation 延迟和缩放变化，就能做出有节奏感的呼吸式波点效果。
关键不在“动”，而在“错开”——每个点的 animation-delay 和缩放曲线必须不同，否则就是齐刷刷弹跳，毫无波点味。
- 用
transform: scale()比width/height更高效，避免重排 - 至少 3 个点才够“波”，5 个点节奏更自然；少于 3 个容易显得机械
- 推荐用
ease-in-out或自定义cubic-bezier(.25,.9,.45,.95)，硬切linear会像机器心跳
CSS里怎么控制每个波点的缩放节奏和延迟
不能靠 JS 动态设 delay，得在 CSS 里写死——但不是硬编码每个 animation-delay: 0.1s 这种。用 CSS 自定义属性 + calc() 更灵活，也方便后续调速。
比如 5 个点，第 n 个点的延迟 = calc(n * 0.2s)，缩放幅度可随 n 微调，让中间点最大、两边略小，视觉上才有“波峰”感。
立即学习“前端免费学习笔记（深入）”；
- 给容器设
--dot-count: 5，再用:nth-child(n)配合--delay: calc((n - 1) * 0.2s) - 缩放值别全用
scale(0.8)→scale(0.7)→scale(0.9)手动写，改起来反人类；统一用scale(calc(0.6 + 0.3 * sin(n * 0.5)))这类思路不现实，CSS 不支持 sin；老实用scale(0.6)、scale(0.8)、scale(1)分档写 - 注意：Firefox 对
transform在伪元素上的硬件加速支持略弱，如果点数多且缩放剧烈，加will-change: transform能稳一点
为什么用伪元素比用真实 <span></span> 更合适
因为波点动画本质是装饰性 UI 元素，不承载语义、不需聚焦、不参与 tab 键导航。用伪元素干净利落，HTML 层面零污染。
一旦用真实 DOM 节点，就得考虑可访问性（要不要加 aria-hidden="true"）、SEO 干扰（爬虫可能误判为内容）、样式隔离难度（容易被全局 span 样式污染）。
- 伪元素默认
content: ""，必须设display: inline-block或block才能生效宽高 - 别忘了设
vertical-align: middle，否则多个内联伪元素会因基线对齐导致上下错位 - 如果父容器用了
font-size: 0清除间隙，伪元素也会受波及——得单独重置font-size，否则em单位失效
动画卡顿或闪烁的常见原因和解法
不是性能不够，大概率是触发了重排或层合成异常。波点动画最怕两件事：尺寸变引起重排、透明度变引发频繁合成。
- 绝对禁止用
width/height动画缩放——这强制浏览器每帧计算布局，iOS Safari 上尤其卡 - 避免用
opacity做淡入淡出，叠加多个半透点时 GPU 合成压力陡增；改用transform: scale()+visibility: hidden切换显隐更稳 - 如果点太多（比如 >8 个），Chrome 可能因图层过多掉帧；此时把容器设
contain: strict，告诉浏览器“这个区域的变化我全包了”，能显著减少样式重计算范围
真正难的不是写出来，是让 3–5 个点在各种屏幕密度、各种浏览器下都保持节奏一致——缩放曲线和延迟差哪怕差 0.05s，移动端就容易看出断层。
