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

Question

我在此页面上找到了该解决方案。但是，background-position 属性是......硬编码的（静态的）。它会在不同的屏幕尺寸上失败（它对于 4K 屏幕来说太窄 - 将重新开始一半，对于小屏幕来说它太宽 - 它会动画太快）。

有没有办法让它动态化，让它在每个屏幕尺寸下都能正常工作？如果你问，不幸的是 100% 不起作用。

@keyframes shimmerBackground {
  0% {
    background-position: -1000px 0
  }
  100% {
    background-position: 1000px 0
  }
}

.shimmer {
  background-image: -moz-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0)), color-stop(60%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0) 100%);
  background-repeat: repeat-y;
  animation: shimmerBackground 1s linear infinite;
  width: 100%;
  height: 100px;
  background-color: blue;
}

<div class='shimmer' />

Answer 1

你可以试试vw (viewport width) / vh (viewport height) / vmin (viewport shorter edge) / vmax (viewport longer edge) 单位。

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

Answer 2

据我了解

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

这里的高度是固定高度：100px；

它可以是动态的，例如 height:20% 或您喜欢的东西 如果你想改变动画速度

animation: shimmerBackground 1s linear infinite;

你可以把1s改成3s或者你喜欢的东西