怎样利用CSS3实现骨架屏波光扫过Shimmer加载动画？-css教程-PHP中文网

Shimmer动画的核心视觉特征是模拟光线掠过金属/玻璃表面的高亮条带线性滑动效果，关键在于亮区位置随时间线性移动、亮区宽度固定、背景保持灰阶静态，通过linear-gradient配合background-position动画实现，而非opacity闪动或transform位移。

怎样利用css3实现骨架屏波光扫过shimmer加载动画？

什么是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层如果统一用父容器背景，会在子元素边界处断裂或错位：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

不要给父容器设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锁住尺寸