Html 使用线性渐变作为背景的响应性光泽动画

我想创建一个发光加载动画，它将出现在不同背景颜色的多个元素上

目前，我正在使用

背景图像

渐变，我正在使用

vw

单位设置

背景位置

的动画，但它不可缩放，我的元素将具有不同的长度

有没有办法用百分比单位设置背景图像的动画

创建的动画

正文{
背景：黑色；
}
标题{
宽度：100%；
高度：50px；
背景色：丽贝卡紫；
背景图像：线性梯度(
对,，
透明0%，
rgba（255255,0.3）50%，
透明100%
);
背景重复：无重复；
背景位置：-100vw；
动画：无限发光；
}
@关键帧发光{
0% {
背景位置：-100vw；
}
100% {
背景位置：100vw；
}
}

---

一个想法是使渐变的大小比容器大3倍，并对其中间部分上色，然后将其从左向右滑动：

正文{
背景：黑色；
}
.盒子{
高度：50px；
保证金：5px；
背景：
线性梯度（90度，#0000 33%，rgba（255255,0.3）50%，#0000 66%）
丽贝卡；
背景尺寸：300%100%；
动画：无限发光；
}
@关键帧发光{
0% {
背景位置：右；
}
/*100% {
背景位置：左，默认值，无需定义
}*/
}

---

Btw，对于背景图像和百分比，这篇文章是很好的读物：