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>

Answer 1

这是因为您要根据 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>

Answer 2

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

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>

CSS - 协调背景位置动画

CSS - Coordinate background-position animation

html

linear-gradients

css-animations