骨架屏

1. 放置暂位<div>标签，设置好宽高

<div class="loading"></div>

.loading {
    width: 300px;
    height: 200px;
    border-radius: 3px;
    box-shadow: 0 0 50px hsla(0, 0%, 0%, 0.1);
    margin: 2em auto;
}

2. 排列三条灰线

--skeleton-grey: hsl(0, 0%, 80%);
background-repeat: no-repeat;
background-image:
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%);
background-position: 
    0px 0px,
    0px 50px,
    0px 100px;
background-size: 
    200px 30px,
    400px 30px,
    400px 30px;

3. 加一条白线，背景涂白

--skeleton-grey: hsl(0, 0%, 80%);
background-repeat: no-repeat;
background-image:
    linear-gradient(100deg, transparent 30%, hsla(0, 0%, 100%, 0.6) 40%, hsla(0, 0%, 100%, 0.8) 50%, hsla(0, 0%, 100%, 0.6) 60%, transparent 70%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(to right, var(--skeleton-grey), var(--skeleton-grey) 100%);
background-position:
    0px 0px,
    0px 0px,
    0px 50px,
    0px 100px;
background-size:
    150px 150px,
    200px 30px,
    400px 30px,
    400px 30px;

4. 让白线动起来

animation: shine 1s infinite;
@keyframes shine {
    to {
        background-position:
            80% 0px,
            0px 0px,
            0px 50px,
            0px 100px;
    }
}

5. 调整下大小、位置、颜色、数量、时间

.loading {
    --skeleton-grey: hsl(0, 0%, 80%);
    width: 800px;
    height: 400px;
    background-repeat: no-repeat;
    background-color: white;
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        hsla(0, 0%, 100%, 0.3) 40%,
        hsla(0, 0%, 100%, 0.7) 50%,
        hsla(0, 0%, 100%, 0.3) 60%,
        transparent 70%
    ),
    linear-gradient(90deg, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(90deg, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(90deg, var(--skeleton-grey), var(--skeleton-grey) 100%),
    linear-gradient(90deg, var(--skeleton-grey), var(--skeleton-grey) 100%);
    background-position: -150px 0px, 50px 50px, 50px 100px, 50px 150px, 50px 200px;
    background-size: 150px 400px, 200px 30px, 500px 30px, 400px 30px, 300px 30px;
    animation: shine 1.5s infinite;
    @keyframes shine {
        to {
            background-position: 650px 0px, 50px 50px, 50px 100px, 50px 150px, 50px 200px;
        }
    }
}

知识点

• linear-gradient
• background