类似稀土掘金的加载占位功能是如何实现的？

在页面预加载时，类似下图的占位效果，是如何实现的，原理是什么？
图片描述

css javascript

html5 html

阅读 3.3k

3 个回答

zollero

用div+css仿照正常数据的展示布局，用css写出灰色的条形，并添加一个颜色变化的动画。

写个简单的例子吧：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
            background-color: #ddd;
        }
        .container {
            width: 320px;
            height: 360px;
            margin: 0 auto;
            padding: 10px;
            background-color: #ffffff;
        }
        .firstLine {
            width: 100%;
        }
        .secondLine {
            width: 40%;
        }
        .line {
            margin-bottom: 10px;
            height: 20px;
            background-color: #f9f9f9;
            animation: twinkle 1.5s infinite;
        }
        @keyframes twinkle {
            from {
                opacity: .5;
            }
            to {
                opacity: .9;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="firstLine line"></div>
        <div class="secondLine line"></div>

        <div class="firstLine line"></div>
        <div class="secondLine line"></div>

        <div class="firstLine line"></div>
        <div class="secondLine line"></div>

        <div class="firstLine line"></div>
        <div class="secondLine line"></div>

        <div class="firstLine line"></div>
        <div class="secondLine line"></div>
    </div>
</body>
</html>