Html 动态背景位置的微光效果？

我在这一页上找到了解决方案。然而，背景位置道具是。。。硬编码静态。它会在不同的屏幕尺寸上出现故障——对于4K屏幕来说，它太窄了——会在半小时内重新启动，对于小屏幕来说，它太宽了——它会太快地产生动画

有没有一种方法可以让它变得动态，这样它就可以在任何屏幕大小下正常工作？如果你问，不幸的是100%不起作用

@关键帧微光背景{ 0% { 背景位置：-1000px 0 } 100% { 背景位置：1000px 0 } } .微光{ 背景图像：-moz-linear-Gradient160度，rgba255，255，255，0.0%，rgba255，255，255，0.25%，rgba255，255，255，255，0.85 60%，rgba255，255，255，0.100%； 背景图像：-webkit gradientlinear，左上角，右上角，颜色停止0%，rgba255，255，255，0，颜色停止25%，rgba255，255，255，255，0，颜色停止60%，rgba255，255，255，0.85，颜色停止100%，rgba255，255，255，0； 背景图像：-webkit-linear-Gradient160度，rgba255，255，255，0 0%，rgba255，255，255，0 25%，rgba255，255，255，255，0.85 60%，rgba255，255，255，0 100%； 背景图像：-o-线性梯度160度，rgba255，255，255，0.0%，rgba255，255，255，0.25%，rgba255，255，255，255，0.85 60%，rgba255，255，255，0.100%； 背景图像：-ms-linear-Gradient160度，rgba255，255，255，0.0%，rgba255，255，255，0.25%，rgba255，255，255，255，0.85 60%，rgba255，255，0.100%； 背景图像：线性梯度160度，rgba255，255，255，0 0%，rgba255，255，0 25%，rgba255，255，255，0.85 60%，rgba255，255，255，0 100%； 背景重复：重复-y； 动画：shimmerBackground 1s线性无限； 宽度：100%； 高度：100px； 背景颜色：蓝色； } 据我所知

当改变屏幕尺寸时，shimer div高度不会根据

此处高度为固定高度：100px

它可以是动态的，比如身高：20%或者你喜欢的东西 如果要更改动画速度

animation: shimmerBackground 1s linear infinite;

您可以将1s更改为3s或其他您喜欢的设置

您可以尝试使用这些单位

我不想硬编码背景位置属性

@keyframes shimmerBackground {
  0% {
    background-position: -100vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}