CSS - 背景位置动画的坐标

Question

我正在尝试创建一个占位符显示以显示内容加载时的状态。为了说明目的，我已将渐变中点更改为黑色（在实际生产中它将是较浅的灰色）。

目标是协调渐变，使其在所有灰色框中大小相同，并在转换的所有阶段都对齐所有框。

目前，动画相对于 <div> 的大小进行调整，而由于 <div> 的大小不同，因此动画不对齐。

有什么想法可以使动画正确对齐吗？

@keyframes Gradient {
 0% {
  background-position-x: 100%
 }
 100% {
  background-position-x: 0%
 }
}
  
.placeholder {
    background: linear-gradient(90deg, #F0F0F0 25%, #000 50%, #F0F0F0 75%);
    animation: Gradient 2s ease infinite;
    margin-bottom: 1em;
    display: block;
    background-size: 400% 100%;
}
.placeholder.fake-h1 {
    height: 4em;
    width: 40%;
    border-radius: 8px;
}
.placeholder.fake-p {
    height: 1.5em;
    width: 100%;
    border-radius: 5px;
}
.placeholder.fake-p.short {
    width: 60%;
}

<div class="placeholder fake-h1"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>
<br />
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>

- abagshaw

Answer 1

您只需要将背景设置为固定即可：

background: linear-gradient(90deg, #F0F0F0 25%, #000 50%, #F0F0F0 75%) fixed;

@keyframes Gradient {
 0% {
  background-position-x: 100%
 }
 100% {
  background-position-x: 0%
 }
}
  
.placeholder {
    background: linear-gradient(90deg, #F0F0F0 25%, #000 50%, #F0F0F0 75%) fixed;
    animation: Gradient 2s ease infinite;
    margin-bottom: 1em;
    display: block;
    background-size: 400% 100%;
}
.placeholder.fake-h1 {
    height: 4em;
    width: 40%;
    border-radius: 8px;
}
.placeholder.fake-p {
    height: 1.5em;
    width: 100%;
    border-radius: 5px;
}
.placeholder.fake-p.short {
    width: 60%;
}

<div class="placeholder fake-h1"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>
<br />
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>

- abney317

Answer 2

这是因为您根据div的宽度设置背景大小。因此，如果您将其设置为固定宽度，它可能会像您想要的那样。

在这里，我只是将background-size的宽度设置为4000px。您可以根据需要进行调整。顺便说一句，您关于该占位符的想法看起来真的很酷。 0% { background-position-x: 4000px; } background-size: 4000px 100%;

@keyframes Gradient {
 0% {
  background-position-x: 4000px;
 }
 100% {
  background-position-x: 0%
 }
}
  
.placeholder {
    background: linear-gradient(90deg, #F0F0F0 25%, #000 50%, #F0F0F0 75%);
    animation: Gradient 5s ease infinite;
    margin-bottom: 1em;
    display: block;
    background-size: 4000px 100%;
}
.placeholder.fake-h1 {
    height: 4em;
    width: 40%;
    border-radius: 8px;
}
.placeholder.fake-p {
    height: 1.5em;
    width: 100%;
    border-radius: 5px;
}
.placeholder.fake-p.short {
    width: 60%;
}

<div class="placeholder fake-h1"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>
<br />
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p"></div>
<div class="placeholder fake-p short"></div>

- Gabriel Cheung