使用 HTML 和 CSS 制作动画内容占位符

本着我上一篇关于使用 Web 技术创建加载动画的文章的精神，在这篇文章中，我将演示如何使用 HTML 和 CSS 为他们的 Web 项目创建内容占位符。

让用户知道后台正在发生某些事情是一种很好的做法，例如通过显示动画来从数据库中检索数据，该动画稍后将被加载的数据替换，而不是什么都不显示，这可能会给人留下页面损坏或出现问题的印象，特别是对于连接较弱的用户而言。

在最新的网络趋势中，内容占位符似乎是众多动画中的最佳选择，因为它们显示的动画效果与要显示的内容尽可能接近。它们可以用于放置不同类型的数据，从文本段落到内容卡片，就像在 YouTube、Instagram 和 Facebook 等主流网站上看到的那样。

继续创建我们的动画内容占位符。

占位符动画的结构由两个 div 块组成，父块作为动画的包装器，具有较暗的背景，子块相对父块定位，跨越父块的整个高度，具有较浅的渐变色背景，将无限动画化，将其从父块左侧的视图之外移动到父块右侧的视图之外。
下面是动画占位符的演示。

以下是占位符动画的剖析预览：

占位符动画的模板如下。

<div class="load-wraper">
    <div class="activity"></div>
</div>

以及用于为占位符动画制作动画的样式表。

.load-wraper{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgb(211,211,211);
    z-index: 44;
    overflow: hidden;
    border-radius: 5px;
}
.activity{
    position: absolute;
    left: -45%;
    height: 100%;
    width: 45%;
    background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    animation: loading 1s infinite;
    z-index: 45;
}

@keyframes loading {
    0%{
        left: -45%;
    }
    100%{
        left: 100%;
    }
}

为了使动画更流畅，请确保子块（.activity）尽可能宽，这里它的宽度是父块总宽度的 45％。

此时，动画占位符块已完成，这就是它的全部实现。

剩下的就是将占位符放置在任何内容卡布局块的线框内，以查看动画占位符的运行情况。

让我们来演示一下这个例子：

卡片组件的动画占位符。

上述卡片的 HTML 如下：

<div class="card">
    <div class="card-image">
        <div class="load-wraper">
            <div class="activity"></div>
        </div>
    </div>
    <div class="card-content">
        <div class="card-text">
            <div class="load-wraper">
                <div class="activity"></div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-image">
        <div class="load-wraper">
            <div class="activity"></div>
        </div>
    </div>
    <div class="card-content">
        <div class="card-avatar">
            <div class="load-wraper circular">
                <div class="activity"></div>
            </div>
        </div>
        <div class="card-avatar-text">
            <div class="load-wraper">
                <div class="activity"></div>
            </div>
        </div>
    </div>
</div>

将样式表添加到卡片：

.card{
    margin: 20px;
    height: 260px;
    width: 400px;
    position: relative;
    float: left;
}
.card-image{
    height: 200px;
    width: 400px;
    position: relative;
}
.card-content{
    margin-top: 20px;
    min-height: 40px;
    display: flex;
}
.card-avatar{
    width: 40px;
    float: left;
    flex: none;
}
.card-avatar-text{
    margin-left: 20px;
    float: left;
}
.card-content, .card-text, .card-avatar, .card-avatar-text{
    height: 40px;
    position: relative;
}
.card-content, .card-text, .card-avatar-text{
    width: 100%;
}
.circular{
    border-radius: 50%;
}

继续在您的 Web 项目中利用动画占位符发挥创意。

文章来源：https://dev.to/xinnks/make-animated-content-placeholders-with-html-and-css-3ekn