用 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) 触发硬件加速，避免卡顿。

基本上就这些——不复杂但容易忽略的是：条纹角度、背景尺寸、位移步长三者要匹配，否则会看到跳帧或断续感。