Question

我有4个要设置渐变背景的元素。

我创建了一个示例：

.element div {
  display: inline-block;
  height: 16px;
  animation: slide 2s infinite;
  animation-timing-function: linear;
  background: linear-gradient(90deg, rgba(242,243,245,1) 0%, rgba(242,243,245,1) 40%, rgba(223,223,223,1) 50%, rgba(242,243,245,1) 60%, rgba(242,243,245,1) 100%);
}

.element div:nth-child(1) {width: 75%;}
.element div:nth-child(2) {width: 65%;}
.element div:nth-child(3) {width: 55%;}
.element div:nth-child(4) {width: 45%;}

@keyframes slide {
  from { background-position: 0 0; }
  to { background-position: 1300px 0; }
}

html,
body {
  height: 100%;
}

<div class="element">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是动画：

@keyframes slide {
  from { background-position: 0 0; }
  to { background-position: 1300px 0; }
}

如您所见，它设置为1300px，因此其他元素的动画不正确

Answer 1

您可以按照以下方式调整代码：

.element div {
  display: inline-block;
  height: 16px;
  animation: slide 2s infinite;
  animation-timing-function: linear;
  background: 
    linear-gradient(90deg, rgba(242,243,245,1) 0%, rgba(242,243,245,1) 40%, rgba(223,223,223,1) 50%, rgba(242,243,245,1) 60%, rgba(242,243,245,1) 100%);
  background-size:200% 100%; /*added this*/
}

.element div:nth-child(1) {width: 75%;}
.element div:nth-child(2) {width: 65%;}
.element div:nth-child(3) {width: 55%;}
.element div:nth-child(4) {width: 45%;}

@keyframes slide {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

<div class="element">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

您可以查看此答案以获取更多详细信息：https://stackoverflow.com/a/51734530/8620333

根据宽度元素设置背景动画

1 个答案: