使用css制作进度条动态条纹流动过渡，核心在于利用`linear-gradient`绘制斜向条纹背景，并通过`background-size`控制条纹密度，配合`@keyframes`动画持续改变`background-position`来实现流动效果。只需定义一个包含透明与不透明色相间的渐变层，设置合适的宽高比，并让背景位置沿x轴或y轴循环位移即可。
linear-gradient如何生成斜向条纹
条纹的本质是重复的线性渐变图案。通过指定角度（如45度）和颜色停止点，可以创建出交替的透明与实心区域。关键在于颜色停止点的百分比总和必须能被背景尺寸整除，从而形成无缝拼接的视觉纹理。例如，从透明到深色再到透明的循环，能产生清晰的边界感。
.progress-bar {
width: 100%;
height: 20px;
background-color: #e0e0e0;
background-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, 0.15) 50%,
rgba(0, 0, 0, 0.15) 75%,
transparent 75%,
transparent
);
background-size: 40px 40px;
}
上述代码中，`background-size: 40px 40px`定义了每个条纹单元的大小。渐变中的25%、50%、75%标记了条纹的起始、中间和结束位置。当背景颜色为浅灰色时，黑色半透明部分形成了阴影般的条纹效果。这种结构确保了条纹在水平方向上连续且均匀分布。
@keyframes如何实现流动动画
流动效果依赖于背景位置的周期性变化。通过定义关键帧，将背景位置从初始状态移动到偏移一个完整条纹宽度的位置，可以实现无缝循环。由于背景图案是周期性的，当位置移动一个周期后，视觉上与原状重合，因此可以无限重复而不出现跳变。
@keyframes progress-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
.progress-bar {
animation: progress-stripes 1s linear infinite;
}
在关键帧中，背景位置从`40px`移动到`0px`，这与之前定义的`background-size`宽度一致。负值方向通常用于模拟向右流动的效果，因为背景图像相对于容器向左移动时，观察者会看到条纹向右推进。`infinite`属性确保动画持续运行，`linear`保证速度恒定，避免加减速带来的突兀感。
条纹流动方向受哪些参数影响
流动的方向和速度由渐变角度、背景尺寸以及动画关键帧中的位移向量共同决定。若希望条纹垂直流动，需调整渐变角度为90度或270度，并相应修改背景尺寸的宽高比例。同时，动画中的`background-position`需改为Y轴位移。此外，改变`background-size`的数值会直接影响条纹的疏密程度，进而影响相同动画速度下的视觉流速。
.vertical-flow {
background-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, 0.15) 50%,
rgba(0, 0, 0, 0.15) 75%,
transparent 75%,
transparent
);
background-size: 20px 40px;
animation-name: vertical-stripes;
}
@keyframes vertical-stripes {
from { background-position: 0 40px; }
to { background-position: 0 0; }
}
此示例展示了垂直流动的实现。渐变角度设为90度，使条纹沿水平方向排列但垂直延伸。背景尺寸设为`20px 40px`，其中高度对应条纹单元的长度。动画关键帧仅改变Y轴位置，从而实现从上至下或从下至上的流动效果。调整这些参数可灵活适配不同场景的需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
