条纹斜向移动的loading效果在各种后台系统、上传组件里出镜率极高：一段斜着的条纹像流水一样不断滑过进度条，既提示了“正在处理”，又比干巴巴的转圈更有质感。很多同学第一次尝试时容易踩坑，比如条纹明明画出来了却怎么也“动不起来”，或者一动就错位断裂。这篇就把整套实现思路掰开讲清楚，从画条纹到让它斜向流动，一步不落。
一、先用linear-gradient画出等宽斜条纹
斜条纹的本质是一个重复的背景图案。原生CSS里linear-gradient本身只能画一次渐变，但只要让渐变的色标紧挨着形成硬边，再配合repeating-linear-gradient，就能得到无限平铺的斜纹。关键点在于两个颜色各占50%且没有过渡区间，这样出来的就是干净利落的条纹而不是柔和渐变。
.bar {
height: 14px;
border-radius: 7px;
background: repeating-linear-gradient(
-45deg,
#4a90d9 0 12px,
#2c5f9e 12px 24px
);
}这里的角度-45deg决定了条纹的倾斜方向，正值向左斜，负值向右斜。每个循环单元是24px（亮色12px加暗色12px），这个数值后面要用来计算位移距离，务必记住它。如果你希望条纹更细腻，把12px改小即可，但两个色段加起来的总宽度最好保持整数，方便后面做无缝循环。
另外提一句，repeating-linear-gradient和直接用linear-gradient加background-size是等价思路，后者可控性更强，适合需要精确控制平铺尺寸的场景，下面第二节会用到这种写法。
二、用background-size铺出可平铺单元，keyframes驱动位移
要让条纹“流动”，原理是让背景图案沿着某个方向持续位移。最稳妥的做法是先用background-size把条纹限定成一个完整单元，再用@keyframes修改background-position。这里有个非常经典的坑：background-position的百分比位移计算方式很特殊——百分比值参照的是容器尺寸减去背景尺寸的差值，当背景尺寸小于容器时，百分比位移的实际距离会很难推算。所以更推荐用像素值位移。
.bar {
height: 14px;
background-image: linear-gradient(
-45deg,
#4a90d9 25%,
#4a90d9 25%,
#2c5f9e 25%,
#2c5f9e 50%,
#4a90d9 50%,
#4a90d9 75%,
#2c5f9e 75%
);
background-size: 24px 24px;
animation: stripe-move 0.8s linear infinite;
}
@keyframes stripe-move {
from { background-position: 0 0; }
to { background-position: 24px 24px; }
}位移量为什么是24px 24px？因为45度斜条纹沿斜向移动一个完整单元，投影到x轴和y轴上正好各是24px（也就是background-size的一倍）。位移距离等于一个完整平铺单元的宽高，动画循环时首尾衔接，视觉上就是无缝的无限流动。如果你把to写成48px 48px也可以，只是速度快了一倍且同样无缝；但如果写成24px 0，条纹会在循环点断裂跳变，因为图案没有回到起点。
角度如果不是45度，位移量的计算就要按斜边投影来算。比如30度斜纹，水平位移量应为单元宽度除以对应角度的余弦值。不想算数学的话，直接用第一种repeating-linear-gradient写法，配合较大的位移值（比如200px）也能绕开精确计算，因为repeating渐变本身就是无限平铺的，只要保证位移量是单元总宽度的整数倍即可。
三、进阶：动画性能与几个实用变体
background-position动画会触发重绘，在低端机上可能出现掉帧。缓解办法是给元素加上will-change: background-position提前告知浏览器，或者把条纹层单独拆成一个绝对定位的伪元素，只对它做动画，避免影响文字层。更极致的方案是改用transform：把条纹画在一个宽度200%的内部元素上，用translateX平移它，能完全走合成器，性能最好。
/* 方案A：伪元素 + background-position */
.btn-loading::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: repeating-linear-gradient(-45deg,
rgba(255,255,255,.35) 0 10px,
rgba(255,255,255,.15) 10px 20px);
animation: flow 1s linear infinite;
will-change: background-position;
}
@keyframes flow {
to { background-position: 28.28px 0; } /* 20px条纹单元沿水平方向的无缝位移 */
}
/* 方案B：transform 平移，性能更佳 */
.stripes {
width: 200%;
height: 100%;
background: repeating-linear-gradient(-45deg, #fff 0 10px, transparent 10px 20px);
animation: slide 1s linear infinite;
}
@keyframes slide {
to { transform: translateX(-25%); }
}再给两个常用变体思路。一是按钮内嵌条纹：用伪元素叠加半透明白色条纹在按钮底色上，按钮文字放上层，提交时加上loading类即可，交互成本几乎为零。二是环形条纹加载：把条纹作为某个圆形元素的背景，再用-webkit-mask或mask裁出圆环形状，条纹流动加上圆环造型，观感非常接近专业组件库的spinner。
最后总结一句：条纹流动三要素——硬边渐变画条纹、background-size或repeating语法铺单元、keyframes按整数倍单元位移。掌握了这个套路，横条、斜条、环形光栅都能随手做出来，无需引入任何第三方动画库。
css loading动画linear-gradient条纹进度条修改时间：2026-09-05 21:12:49