骨架屏波浪动画的核心视觉逻辑是用linear-gradient模拟高亮条横向扫过灰色块，通过background-position持续位移制造流动感；--wave-offset仅控制偏移量，不参与颜色或尺寸定义。
什么是骨架屏波浪动画的核心视觉逻辑
骨架屏波浪动画的本质不是“让元素动起来”，而是用 linear-gradient 模拟高亮条在灰色块上横向扫过的效果，并通过 background-position 的持续位移制造流动感。自定义属性（--wave-offset）在这里只负责控制偏移量，不参与颜色或尺寸定义——这点常被误用，导致动画卡顿或无法响应式适配。
如何用 CSS 自定义属性驱动 background-position 动画
必须将动画关键帧中变化的值绑定到自定义属性，再用 background-position 引用它；直接在 @keyframes 里写百分比位移无法被 JS 动态调整，也失去主题切换能力。
- 动画容器需设
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);，角度固定为90deg，否则波浪方向错乱 - 用
background-size: 200% 100%;确保渐变宽度是容器两倍，才能平滑滚动 - 动画定义必须用
background-position: var(--wave-offset, 0) 0;，且--wave-offset值单位为%或px（推荐%） - JS 修改时写
el.style.setProperty('--wave-offset', '100%');，不要漏掉单位
为什么 animation-timing-function 必须用 ease-in-out
用 linear 会显得机械生硬，用户一眼识别出“这是假加载”；ease-in-out 让高亮条起始慢、中间快、结尾缓，更接近真实光扫过金属表面的物理反馈。实测中，若搭配 animation-duration: 1.4s，节奏最自然——快于 1.2s 显得焦躁，慢于 1.6s 显得迟滞。
- 避免用
cubic-bezier(0.4, 0, 0.2, 1)等复杂贝塞尔曲线，增加维护成本且无明显收益 - 不要给骨架元素加
transform: translateZ(0)强制硬件加速：现代浏览器对background-position动画已有优化，额外触发层叠上下文反而可能引发重绘抖动
响应式中断时如何保持动画连贯性
当窗口 resize 或主题切换（如深色模式）触发样式重算，background-position 动画会重置为初始值，造成“闪跳”。解决方案不是重启动画，而是监听变化并平滑过渡偏移量。
- 用
window.matchMedia('(prefers-color-scheme: dark)')监听主题变更，而非依赖class切换 - resize 时不要直接重设
--wave-offset为0%，改用el.animate([{ '--wave-offset': getComputedStyle(el).getPropertyValue('--wave-offset') }, { '--wave-offset': '100%' }], { duration: 0.1 })微调衔接 - 移动端需加
@media (hover: none)降级：触屏设备取消动画，仅保留静态骨架，避免误判为可点击区域
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
