Shimmer动画的核心视觉特征是模拟光线掠过金属/玻璃表面的高亮条带线性滑动效果，关键在于亮区位置随时间线性移动、亮区宽度固定、背景保持灰阶静态，通过linear-gradient配合background-position动画实现，而非opacity闪动或transform位移。
什么是Shimmer动画的核心视觉特征
Shimmer不是单纯的颜色渐变或位移，而是模拟光线掠过金属/玻璃表面时产生的高亮条带快速滑动效果——关键在于「亮区位置随时间线性移动 + 亮区宽度固定 + 背景保持灰阶静态」。CSS里最直接的实现路径是用linear-gradient配background-position动画，而不是靠opacity闪动或transform平移整个容器。
用background-image + animation写最简可行版
骨架屏本身用灰色块（background-color: #f0f0f0）占位，Shimmer层叠在其上作为伪元素或额外div。重点在gradient方向和动画节奏：
- 渐变必须是左右向：
linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent)，中间亮条宽度由第二个色标位置控制（比如rgba(255,255,255,0.2) 60%） -
background-size设为200% 100%，才能让亮条在容器内完整滑入滑出 - 动画只动
background-position-x：从-100%到200%，时长建议1.5s～2s，太快显得刺眼，太慢失去“扫过”感 - 别用
infinite直接循环——首尾衔接处会跳变，加animation-timing-function: linear保匀速，且起止值要错开（如-100%→200%而非0%→100%）
shimmer {
background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.2) 60%, transparent);
background-size: 200% 100%;
animation: shimmer 1.8s infinite linear;
}
@keyframes shimmer {
0% { background-position-x: -100%; }
100% { background-position-x: 200%; }
}
适配不同骨架结构时的常见翻车点
实际项目里骨架常由多个不规则矩形组成（头像圆角、标题长条、段落短块），Shimmer层如果统一用父容器背景，会在子元素边界处断裂或错位：
- 不要给父容器设Shimmer再靠
overflow: hidden裁剪——圆角区域亮条会被截断，且移动端缩放后位置偏移 - 每个骨架单元（如
.skeleton-avatar）单独加Shimmer类，background设为inherit或重新声明，避免继承父级background-position导致错位 - 圆角元素需同步设置
border-radius到Shimmer层，否则亮条边缘生硬；若用伪元素实现，::after必须设border-radius: inherit - Flex/Grid布局下，Shimmer元素若设
width: 100%但父容器未定宽，动画会因宽度波动而抖动——明确设min-width或用flex-basis锁住尺寸
兼容性与性能取舍建议
IE10+支持linear-gradient和background-position-x，但iOS Safari 9.3以下不支持background-position-x/y独立属性，得回退到background-position双值写法：
立即学习“前端免费学习笔记（深入）”；
- 写成
background-position: -100% 0;和200% 0;，虽稍冗余但全平台安全 - 避免用
filter: blur()做柔边——低端安卓机掉帧严重，宁可接受略硬的亮条边缘 - 动画元素尽量用
will-change: background-position触发GPU加速，但别滥用，仅对持续播放的骨架屏容器加 - 服务端渲染场景下，初始HTML里就该包含带
shimmer类的骨架DOM，而非JS插入——否则首屏闪一下空白再出骨架
亮条的透明度、宽度、速度三者要一起调：改rgba(255,255,255,0.2)比调background-size更易控质感，但0.1太弱、0.3太假，0.18～0.22是多数设计稿的甜点区间。
