Html 如何使用css创建Facebook帖子动画？

每当我访问Facebook，这个动画就会出现

在邮件加载之前。我认为他们在一组div上使用css来创建假定的post行和带有背景的用户图像 梯度

background: -webkit-linear-gradient(left, #ccc, #fff 50%, #ccc);

---

然而，这些线条背景的梯度会随着时间而变化。有可能用css创建这个吗

可以使用CSS3创建此类动画。GIF通常用于加载图像，因为您需要做的只是包含一个图像，但它们可能非常大，在前端加载可能需要相当长的时间。不过，CSS3的加载速度要快得多，因此您可以将其放在任何地方

在CSS3中，使用变换和关键帧来制作动画。关键帧定义对象更改的对象，例如脉冲图标的大小版本。转换定义了它如何从一个移动到另一个

---

这里有更多信息，尽管这里的老问题是如何做

主旨

从主白色（或任何其他颜色）容器开始

创建具有动画渐变背景的子容器

主要技巧：创建一堆小的白色（或您以前选择的任何颜色）块，将它们放置在顶部，以便它们与动画块重叠，并创建不同动画部分的幻觉

最难的部分可能是CSS动画，所以我把它放在这里：

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}

---

我不是要求为我编写代码。我只是想知道是怎么做的？他们用什么？我认为链接很棒，但不应该是你的全部答案：我在那里编辑过。如果这更令人满意，你能取消否决票吗？我请大家记住，提出问题的人明确表示他们不想看到任何代码“问题明确表示他们不想看到任何代码”，那么他们在做什么？欢迎链接到潜在的解决方案，但是，请让您的其他用户知道它是什么，以及它为什么存在。始终引用重要链接中最相关的部分，以防无法访问目标站点或永久脱机。考虑到仅仅是一个指向外部站点的链接是一个可能的原因。好的，我将扩展我的答案