Question

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

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

public class EventForwarder
{
    private readonly RootEventSource rootEventSource;

    public EventForwarder(RootEventSource rootEventSource)
    {
        this.rootEventSource = rootEventSource;
    }

    public event Signal AnotherEvent
    {
        add { this.rootEventSource.RootEvent += value; }
        remove { this.rootEventSource.RootEvent -= value; }
    }
}

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

Answer 1

尽管这里有一个古老的问题，an article告诉我们该怎么做。

主要想法

从主白色（或任何其他颜色）容器开始。
创建具有动画渐变背景的子容器。
主要技巧：创建一堆小白色（或之前选择的任何颜色）块将它们放在顶部，这样它们就会与动画重叠，并产生不同动画部分的错觉。

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

Answer 2

可以使用CSS3创建这些类型的动画。 Gif通常用于加载图像，因为您需要做的只是包含一个图像，但它们可能非常大并且可能需要很长时间才能加载到前端。然而，加载CSS3要快得多，所以你可以把它放在任何地方。

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

此处提供更多信息http://www.sitepoint.com/creating-loading-animations-using-only-css3/

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

2 个答案:

主要想法