Question

我正在创建具有闪光效果的Facebook内容占位符。我只想从左上角到右下角设置背景属性的动画（或应用从左上到右下的线性渐变）。

.Box {
  height: 100px;
  width: 100px;
  margin: 16px;
  background: #f6f7f8;
  border-radius: 50%;
}

.Shine {
  display: inline-block;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-repeat: no-repeat;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 10px 0;
  }
}

<div class="Shine">
  <div class="Box"> </div>
</div>

现在，它从左到右呈线性增长。

Answer 1

您需要调整渐变，然后考虑百分比值才能获得更好的效果：

.Box {
  height: 100px;
  width: 100px;
  margin: 16px;
  background: #f6f7f8;
  border-radius: 50%;
}
.Shine {
  display: inline-block;
  background: 
    linear-gradient(to bottom right, #eeeeee 40%, #dddddd 50%, #eeeeee 60%);
  background-size:200% 200%;
  background-repeat: no-repeat;
  animation:placeholderShimmer 2s infinite linear;
}

@keyframes placeholderShimmer {
  0% {
    background-position:100% 100%; /*OR bottom right*/
  }

  100% {
    background-position:0 0; /*OR top left*/
  }
}

<div class="Shine">
 <div class="Box"></div>
</div>

诀窍在于，背景将是具有对角线方向的容器（200%x200%）的两倍大，并且我们在中间（50%附近）进行着色。然后，我们只需将此 big 背景从top left滑到bottom right。

您可以查看此答案以获取有关其工作方式的更多详细信息：https://stackoverflow.com/a/51734530/8620333

从左上到右下线性动画背景属性

1 个答案: