如何在不设置background-size时用百分比设置linear-gradient偏移量

可以用CSS自定义属性（变量）来解决重复书写高度值的问题，同时调整background-size保证动画无缝循环，具体实现如下：

修改后的代码 #

CSS #

@keyframes bar-animation {
    to {
        background-position-y: var(--bar-height);
    }
}

.bar {
    --bar-height: 20px; /* 仅需在此处定义高度一次 */
    width: 200px;
    height: var(--bar-height);
    background: linear-gradient(red, blue, red);
    background-size: 100% calc(var(--bar-height) * 2); /* 背景垂直尺寸设为容器高度的2倍 */
    animation: bar-animation 1s ease-in infinite;
}

/* 适配不同高度的容器，仅需重写变量 */
.bar-large {
    --bar-height: 50px;
}

HTML #

<!-- 默认高度的容器 -->
<div class="bar"></div>
<!-- 自定义高度的容器 -->
<div class="bar bar-large"></div>
<!-- 直接通过内联样式设置高度 -->
<div class="bar" style="--bar-height: 35px;"></div>

原理说明 #

• 用--bar-height自定义属性存储容器高度，在height属性和动画的background-position-y中复用该值，彻底避免重复书写。
• 设置background-size: 100% calc(var(--bar-height) * 2)：因为你的渐变是红色→蓝色→红色的对称结构，把背景垂直尺寸设为容器高度的2倍后，当背景向上偏移一个容器高度时，刚好能衔接开头的红色，实现完全无缝的循环动画。
• 适配不同高度时，要么新增类重写--bar-height，要么直接通过内联样式设置变量，无需改动动画核心代码。

内容的提问来源于stack exchange，提问作者Shtole