50projects50days知识点-24-content-placeholder

示例网址：

https://50projects50days.com/projects/content-placeholder/
http://50projects.tc.cluski.top/50projects50days/content-placeholder/

效果：

思路：

主要工作是放在加载时候的动画上，首先可以使用background-image: linear-gradient()达成这样的效果：（把高亮色换成了红色，方便展示）

background-image: linear-gradient(to right,
#f6f7f8 0%,
#d20c0c 10%,
#f6f7f8 20%,
#f6f7f8 100%
);

之后再讲背景放大2倍，然后再左右移动背景即可。移动背景的时候可以使用animation来做。

.animated-bg {
    background-image: linear-gradient(to right,
    #f6f7f8 0%,
    #d20c0c 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
    );
    background-size: 200%;
    animation: bgPos linear 1s infinite;
}

@keyframes bgPos {
    0% {
        background-position-x: 50%;
    }
    100% {
        background-position-x: -150%;
    }
}