CSS如何制作复杂的加载闪烁骨架屏_利用animation控制背景渐变-css教程-PHP中文网

骨架屏闪烁关键在于background-image渐变位移：用linear-gradient创建透明渐变条，配合background-size和background-position动画模拟“光扫过”效果，比opacity更轻量；需错开列表项动画延迟、防缩放失真，并为IE11降级为opacity方案。

css如何制作复杂的加载闪烁骨架屏_利用animation控制背景渐变

animation实现骨架屏闪烁的关键是background-image渐变位移

纯CSS骨架屏闪烁不是靠opacity闪，而是用background-image配合linear-gradient和background-position动画制造“光扫过”的错觉。浏览器渲染时，渐变背景的位移比opacity重绘更轻量，尤其在列表项多、DOM深的场景下帧率更稳。

常见错误是直接对background-color做animation——这会触发重排，且无法模拟真实加载时“从左到右亮起”的视觉流。必须用background-image生成一个带透明区的渐变条，再动它的位置：

div.skeleton {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    #f0f0f0 20%,
    #e0e0e0 40%,
    transparent 60%
  );
  background-size: 300% 100%;
  animation: shine 2s infinite;
}
@keyframes shine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

多个骨架元素需独立控制动画延迟避免同步闪烁

列表里每个.skeleton-item如果共用同一套animation，会集体跳闪，失去“逐行加载”的真实感。必须用animation-delay错开节奏，但不能手写10个不同值——容易漏、难维护。

推荐用CSS自定义属性统一管理：给父容器设--delay-step: 0.1s，子项用animation-delay: calc(var(--delay-step) * var(--index))
实际项目中更稳妥的是JS动态注入style：遍历所有骨架节点，设element.style.animationDelay = `${i * 0.15}s`
注意：Safari对calc()在animation-delay里的支持较晚（iOS 15.4+），老版本需降级为内联style

移动端骨架屏要防住缩放导致的背景拉伸失真

用background-size: 300% 100%时，如果用户双指缩放页面，部分安卓WebView或旧版Chrome会把背景图按视口缩放，导致光效变宽、闪烁变慢甚至卡住。这不是bug，是background-size默认以容器尺寸为基准，而缩放改变了容器的CSS像素计算逻辑。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

解法很直接：强制锁定背景尺寸单位为px，并用transform: scale()替代页面缩放（需配合meta viewport禁用user-scalable）：

.skeleton {
  /* 不用百分比，改用固定像素 */
  background-size: 600px 100%;
  /* 动画里也换算成px */
  animation: shine-px 2s infinite;
}
@keyframes shine-px {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

IE11及以下不支持background-image动画，得有降级方案

IE11能解析linear-gradient，但不支持background-position动画——整个@keyframes块会被忽略，骨架屏就变成静态灰色块，毫无加载提示。不能只靠@supports检测，因为IE11的@supports (animation: a)会返回true，但它根本跑不动背景动画。