如何使用css创建Facebook张贴动画？ [英] How to create a Facebook post animation using css?

问题描述

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

加载帖子之前。我认为他们在一组div上使用css来创建假想的帖子行和用户图像，其背景为
gradient

  background ：-webkit-linear-gradient（left，＃ccc，#fff 50％，＃ccc）; 
  

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

解决方案

尽管这里的老问题是一篇文章，告诉他们如何去做。 主要思想 h2>

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

JSFiddle完整示例

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

  @keyframes placeHolderShimmer {
 0％{
 background-position：-468px 0 
} 
 100％{
 background-position： 468px 0 
} 
} 
 
。动画背景{
动画持续时间：1s; 
 animation-fill-mode：forwards; 
 animation-iteration-count：infinite; 
 animation-name：placeHolderShimmer; 
 animation-timing-function：linear; 
背景：＃f6f7f8; 
背景：线性渐变（向右，#eeeeee 8％，#dddddd 18％，#eeeeee 33％）; 
 background-size：800px 104px; 
 height：96px; 
职位：亲属; 
} 
  

Whenever I visit Facebook, this animation shows

before post is loaded. I think they use css on group of divs to create the supposed post lines and user image with background gradient

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

However the gradient of the background of these lines changes with time. Is it possible to create this with css?

解决方案

Despite it's old question here is an article telling how to do it.

The main idea

1. Start with a main white (or any other color) container.
2. Create a child container with animated gradient background.
3. Main trick: create a bunch of small white (or any color you picked before) blocks place them on top so they will overlap the animated one and create an illusion of different animated parts.

JSFiddle full example

The hardest part may be the CSS animation, so I put it here:

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

这篇关于如何使用css创建Facebook张贴动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！