html背景百分比渐变,html-CSS背景渐变发光动画

我想创建一个发光加载动画,该动画将出现在具有不同背景颜色的多个元素上.

当前,我正在使用背景图像渐变,并且正在使用vw单位为背景位置设置动画,但是它不可缩放,我的元素将具有不同的长度.

有没有一种方法可以使背景图像具有百分比单位？

创建的动画

body {

background: black;

}

header {

width: 100%;

height: 50px;

background-color: rebeccapurple;

background-image: linear-gradient(

to right,transparent 0%,rgba(255,255,0.3) 50%,transparent 100%

);

background-repeat: no-repeat;

background-position: -100vw;

animation: shine 2s infinite;

}

@keyframes shine {

0% {

background-position: -100vw;

}

100% {

background-position: 100vw;

}

}

JS Bin