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

据我了解

当更改屏幕尺寸shimer div高度时未更改

此处的高度是固定高度：100px;

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

animation: shimmerBackground 1s linear infinite;

您可以将1s更改为3s或类似的内容

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

2 个答案: