CSS自定义属性在骨架屏中的核心作用是将视觉变量（颜色、动画时长、扫光偏移等）从硬编码中解耦，实现动画行为的可配置、可继承、可响应；通过calc()与background-position联动确保扫光精准覆盖内容区，适配不同尺寸、主题及系统偏好（如prefers-reduced-motion），并保障在flex/grid等复杂布局中尺寸语义一致。
什么是CSS自定义属性在骨架屏里的核心作用
CSS自定义属性（--color-skeleton、--skeleton-duration 等）不是为了“炫技”，而是把骨架屏的视觉变量（颜色、动画时长、渐变偏移）从硬编码中抽离出来，让同一套 @keyframes 能适配不同组件尺寸和主题。它不替代 animation，但能让 animation 的行为可配置、可继承、可响应。
- 骨架屏元素通常用
background-image: linear-gradient(...)模拟高亮扫光，而扫光位置需随容器宽度动态调整 → 必须用calc()+ 自定义属性控制background-position - 移动端小屏下动画过快会显得突兀，需根据
prefers-reduced-motion或媒体查询动态降级--skeleton-duration - 不要直接在伪元素上写死
background-position: 200% 50%，这会导致缩放或 rem 布局下偏移错位
如何用 background-position + 自定义属性驱动扫光动画
关键不是“怎么动”，而是“动得准”：扫光必须从左到右完整划过容器可见区域，且不因 padding/margin 或 box-sizing 偏差跳变。
<pre class="brush:php;toolbar:false;">:root {
--skeleton-width: 100%;
--skeleton-duration: 1.4s;
}
<p>.skeleton {
--skeleton-offset: calc(var(--skeleton-width) * -1);
background: #f0f0f0;
background-image: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
background-size: var(--skeleton-width) 100%;
background-position: var(--skeleton-offset) 50%;
animation: skeletonShine var(--skeleton-duration) infinite;
}</p><p>@keyframes skeletonShine {
0% { background-position: var(--skeleton-offset) 50%; }
100% { background-position: 100% 50%; }
}--skeleton-width 应设为该骨架元素的 <strong>内容区宽度</strong>（非父容器），推荐用 <code>width: 100%+box-sizing: border-box保证可控-
background-size必须显式声明，否则默认是auto，background-position的百分比计算基准会飘 - 动画终点写
100% 50%而非var(--skeleton-width) 50%，因为background-position百分比值始终相对于 background-image 尺寸，而非容器
为什么 prefers-reduced-motion 必须配合自定义属性降级
用户开启“减少动画”后，animation 会被浏览器强制暂停，但骨架屏若完全静止，会误判为加载失败。正确做法是保留占位结构，仅关闭运动，靠自定义属性切换为静态高亮态。
<pre class="brush:php;toolbar:false;">@media (prefers-reduced-motion: reduce) {
:root {
--skeleton-duration: 0.01ms; /* 触发一次渲染即停 */
}
.skeleton {
background-image: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.15),
transparent
);
}
}- 不要用
animation: none，它会清空整个动画声明，导致 fallback 背景失效 - 把
--skeleton-duration设为极小值（如0.01ms），既满足“播放一次”语义，又避免视觉残留 - 同时降低
rgba()透明度，让静态态更接近未激活状态，避免突兀
响应式骨架屏里最易被忽略的尺寸同步问题
当骨架屏嵌套在 flex 或 grid 容器中，其宽度常由内容决定（如 flex: 1），此时 --skeleton-width 若仍写死为 100%，background-size 会按父容器算，扫光就可能只覆盖一半。
立即学习“前端免费学习笔记（深入）”；
- 在 flex 子项中，改用
--skeleton-width: 100vw不可靠（滚动条影响），应改用width: min(100%, 320px)+ JS 注入实际offsetWidth到自定义属性（仅首次） - 更稳妥的做法：对每个骨架容器加
data-skeleton-width属性，用 CSS attr() 提取（但 attr() 仅支持 string，需配合calc(attr(data-skeleton-width) * 1px)） - 扫光动画的
animation-timing-function推荐用cubic-bezier(0.25, 0.46, 0.45, 0.94)，比ease-in-out更自然，尤其在窄容器中避免“卡顿感”
骨架屏动效是否优雅，不取决于动画多炫，而在于扫光路径是否严丝合缝贴合内容边界、是否尊重用户系统偏好、是否在各种布局上下文中保持尺寸语义一致。自定义属性在这里不是锦上添花，是维持这种一致性的唯一低成本方式。
