CSS - 协调背景位置动画

Question

我正在尝试创建一个占位符显示，以便在加载内容时显示。为了便于说明，我已将渐变的中点更改为黑色（生产中的灰色会更浅）。

目的是协调渐变，使其在所有灰色框中的大小相同，并在过渡的所有点上对齐所有框。

目前，动画相对于tk_tools/images.py的大小，并且由于<div> s的大小不同，动画未对齐。

有关如何正确对齐动画的任何想法？

＆＃13;

＆＃13;

<div>

＆＃13;

@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%;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

＆＃13;

＆＃13;

@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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

在这里，我只需将background-size的宽度设置为4000px。您可以根据需要进行调整。顺便说一下，你对这个占位符的想法看起来很酷。

0% { background-position-x: 4000px; } background-size: 4000px 100%;

＆＃13;

＆＃13;

@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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;