动感光波本质是用linear-gradient定义高亮色带并配合background-position横向位移实现的扫光效果；需控制background-size、避免重排、适配深色模式及iOS渲染缺陷。
linear-gradient 做动感光波的本质是什么
不是“光波”，是用渐变色 + 位移动画模拟出的扫光效果。核心就两点：background-image 用 linear-gradient 定义一条高亮色带，再用 background-position 横向移动它——人眼看到的就是一道光掠过。
常见错误是直接 animating background-size 或堆叠多个渐变，结果光效生硬、边缘糊、性能掉帧。
- 必须用
background-size配合background-position控制光带宽度和移动范围，比如background-size: 200% 100%才能让光从左进右出 - 动画要加
background-attachment: scroll（默认值，但显式写上更稳），避免在某些滚动容器里错位 - 别用
%单位做background-position动画起点/终点——不同宽高比下表现不一致，改用px或vw更可控
怎么写出不卡顿的光波动画
CSS 动画卡顿，90% 出在触发了重排（reflow）或非合成层绘制。光波条只动背景位置，本该很轻，但一不小心就会掉进陷阱。
- 必须给元素加
will-change: background-position，提前告诉浏览器这个属性会变（Chrome/Firefox 有效） - 确保父容器没设
overflow: hidden且子元素没触发 BFC 边界——否则光带移出区域时可能被意外裁切 - 动画时长别设太短，
animation-duration: 1.5s比0.6s更易感知流畅，也更省 CPU - 用
transform: translateZ(0)强制升层？没必要。纯background-position动画本身就在合成层，加了反而多一层管理开销
示例关键片段：
立即学习“前端免费学习笔记（深入）”；
loading-bar {
background-image: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.8),
transparent
);
background-size: 200% 100%;
background-position: -100% 0;
animation: shine 1.8s infinite;
}
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 200% 0; }
}
移动端 Safari 光波消失或闪烁怎么办
iOS 15+ 的 WebKit 对 background-position 动画有渲染优化激进策略，尤其在 position: fixed 或 transform 父容器里，光带容易跳帧甚至完全不可见。
- 加
-webkit-mask-image备用方案：用透明度遮罩配合同款动画，双保险（但仅限需要兼容 iOS 14–16 的场景） - 禁用硬件加速干扰：
-webkit-transform: translateZ(0)改成-webkit-transform: translate3d(0, 0, 0)，部分旧版 Safari 对translateZ解析异常 - 避免在
input聚焦、键盘弹起时触发动画——iOS 会临时降帧，改成聚焦后延迟 100ms 再启动动画 - 别用
background-clip: text套光波，Safari 渲染文本背景动画极不稳定
如何让光波适配深色模式下的加载条
光波颜色不能硬写死 rgba(255, 255, 255, 0.8)。深色模式下，高亮色得变暗，否则刺眼；浅色模式下又得提亮，否则看不清。
- 用
CSS 自定义属性 + prefers-color-scheme切换主色：--shine-color: color-mix(in srgb, white 80%, transparent);配合媒体查询动态改值 - 别依赖
currentColor——它继承的是文字色，而加载条背景常为块级色，语义错位 - 如果项目还没用 CSS 变量，至少把光波色抽成类名控制：
.theme-light .loading-bar和.theme-dark .loading-bar分别覆盖background-image - 注意：深色模式下，
transparent在linear-gradient里仍算“透明”，不会自动变暗，必须显式写成color-mix(in srgb, black 0%, transparent)类似逻辑
