骨架屏呼吸灯效果是用linear-gradient创建高亮色带，通过transform: translateX()和opacity渐变实现光扫过视觉流动。核心动画须用transform与opacity触发合成层，时长2s～2.5s、ease-in-out缓动，关键帧仅修改二者；背景倾斜角度90deg或75deg，色带宽15%~25%，background-size设200% 100%；容器需overflow: hidden，伪元素实现，禁用用户选中，并在内容加载后清除动画样式。
什么是骨架屏呼吸灯效果？
骨架屏呼吸灯效果，本质是用 linear-gradient 创建一条高亮色带，再通过 transform: translateX() 让它从左到右匀速滑过容器，配合透明度渐变，模拟出“光扫过”的呼吸感。不是真正在闪烁，而是视觉流动带来的加载暗示。
核心动画怎么写才不卡顿？
CSS 动画卡顿通常源于重排或使用了低效属性。这里必须用 transform 和 opacity（二者触发合成层），绝不能用 left 或 background-position 做位移。
- 动画时长建议设为
2s～2.5s：太短显得急促，太长削弱加载感知 - 用
ease-in-out而非linear：让光带进出更自然，避免机械感 - 关键帧中只改
transform和opacity，例如：@keyframes shine { 0% { transform: translateX(-100%); opacity: 0.4; } 50% { opacity: 0.8; } 100% { transform: translateX(100%); opacity: 0.4; } }
linear-gradient 背景怎么配才像“光”？
重点不是颜色多炫，而是明暗过渡要窄、方向要斜——真实反光不会是直上直下的条纹。
- 推荐写法：
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) - 角度用
90deg（水平方向）方便后续translateX配合；若用75deg可增强倾斜感，但需同步调整动画位移范围 - 中间色带宽度控制在
15%~25%：太宽像补丁，太窄看不出流动 - 务必加
background-size: 200% 100%：确保光带初始位置在视区外，否则第一帧会突兀闪现
实际嵌入组件时容易漏掉什么？
骨架屏常被套在按钮、卡片、列表项里，但很多人忘了约束容器行为，导致动画溢出或错位。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
overflow: hidden，否则光带滑出边界可见 - 骨架元素本身推荐用伪元素实现（如
::after），避免额外 DOM 节点干扰布局流 - 响应式下需重置
background-size：比如在移动端把200%改成300%，否则光带太“胖”，扫一遍就结束了 - 别忘了禁用用户选中：
-webkit-user-select: none; user-select: none;，否则光带动画期间可能意外触发文字选中态
最易被忽略的是动画重置时机：当真实内容渲染完成，不仅要隐藏骨架元素，还要清除内联的 animation 样式或切换 class，否则某些浏览器（尤其是 Safari）会在 DOM 复用时残留旧动画状态。
