怎样实现css图片加载前的骨架屏闪烁动画_利用linear-gradient循环移动-css教程-PHP中文网

linear-gradient 是最轻量的骨架屏闪烁方案，纯 css 实现、无重排、gpu 加速友好；需精确匹配渐变方向、色带宽度、background-size 与 background-position，推荐垂直渐变配合横向位移，三色渐变更自然，动画时长 1.5s，伪元素承载动画并配合 opacity 过渡实现无缝切换，移动端需避免合成层混乱与全层重绘。

怎样实现css图片加载前的骨架屏闪烁动画_利用linear-gradient循环移动

为什么用 `linear-gradient` 做骨架屏闪烁更轻量

不用额外图片或 SVG，纯 CSS 实现骨架屏闪烁动画，linear-gradient 是最直接的方案——它能通过背景色带的位移模拟「光扫过」效果，且不触发重排，GPU 加速友好。关键在于：渐变方向、色带宽度、background-size 和 background-position 的联动必须精确匹配，否则会出现断层或卡顿。

推荐用垂直渐变（to right）配合横向移动，视觉上更接近“扫描”感
background-size 要设为固定宽高比（如 200% 100%），确保动画循环平滑
起始 background-position 必须是负值（如 -200% 0），否则第一帧无位移，动画会“跳”一下

怎么写一个可复用的骨架屏动画类

把动画抽成独立 class，方便在不同图片占位元素上复用。核心是定义 @keyframes + 控制背景尺寸与位移节奏：

`.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s infinite;
}

@keyframes skeleton-shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}`

三色渐变段（#f0f0f0 → #e0e0e0 → #f0f0f0）比双色更自然，避免生硬边界
动画时长 1.5s 是经验值：太快显得浮躁，太慢失去“加载中”暗示
不要用 % 单位写 background-size（如 100% 100%），否则位移会失效

图片加载完成时如何无缝切换掉骨架屏

不能靠 JS 手动删 class 或改 display，那样会闪一下。正确做法是利用 img 的 load 事件 + CSS 过渡控制不透明度：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

`<div class="skeleton-wrapper">
  @@##@@
</div>`

`.skeleton-wrapper {
  position: relative;
}
.skeleton-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(...);
  background-size: 200% 100%;
  animation: skeleton-shine 1.5s infinite;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.real-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.real-img.loaded {
  opacity: 1;
}
.skeleton-wrapper::before.loaded {
  opacity: 0;
}`