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

Question

每当我访问 Facebook 时，都会显示此动画

在加载帖子之前。我认为他们在 div 组上使用 css 来创建假定的帖子行和带有背景的用户图像 渐变

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

然而，这些线条背景的渐变随时间而变化。是否可以用 css 创建它？

Answer 1

尽管这是一个老问题，但这里是 an article告诉你怎么做。

主要思想

1. 从一个主要的白色(或任何其他颜色)容器开始。
2. 创建一个带有动画渐变背景的子容器。
3. 主要技巧:创建一堆小的白色(或您之前选择的任何颜色) block ，将它们放在顶部，以便它们与动画 block 重叠并创建不同动画部分的错觉。

JSFiddle full example

最难的部分可能是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;
}