用 linear-gradient 创建45°斜向条纹背景并配合 @keyframes 平移 background-position 实现匀速流动的光栅扫描效果，关键在于条纹角度、background-size 与位移步长三者匹配。
用 linear-gradient 配合 @keyframes 实现斜向条纹流动的 loading 条，核心是“固定背景尺寸 + 平移背景位置”，本质是模拟光栅扫描效果。
1. 创建斜向条纹背景
用 linear-gradient 定义 45°（或 -45°）的黑白（或双色）条纹，注意控制条纹宽度：
- 方向写成
45deg或to bottom right，实现斜向； - 颜色停靠点要紧凑，比如
black 0%, black 50%, transparent 50%, transparent 100%，形成清晰条纹； - 用
background-size控制条纹疏密，例如20px 20px表示每个条纹单元宽高都是 20px。
2. 用 animation 平移 background-position
条纹“动起来”的关键是让背景图持续偏移。只需在 @keyframes 中改变 background-position 的横纵坐标：
- 沿 45° 方向移动，x 和 y 同步变化，如
0 0 → 20px 20px； - 动画时长建议 1–2s，
linear动画函数保证匀速流动； - 加上
infinite实现循环，视觉上就是连续光栅扫过。
3. 应用到元素并优化表现
把动画加到目标元素（如 loading bar 容器），同时注意几个实用细节：
立即学习“前端免费学习笔记（深入）”；
- 设
background-clip: padding-box防止背景溢出圆角； - 若条纹太锐利，可微调透明度或加一层半透遮罩提升质感；
- 移动端要注意
will-change: background-position或transform: translateZ(0)触发硬件加速，避免卡顿。
基本上就这些——不复杂但容易忽略的是：条纹角度、背景尺寸、位移步长三者要匹配，否则会看到跳帧或断续感。
