利用css实现SPA首屏骨架屏

前言

最近新学到一招，利用原生css实现首屏骨架，这样即可以省去在Home.vue组件中单独创建骨架，而且对html结构是0添加。

先看看预览图：

效果还是可以的。

教程

原理就是利用background-image的多重渐变实现骨架占位，配合background-size和background-position进行精准定位，如果你的骨架是大量重复内容，还可以配置background-repeat: repeat-y;进行y轴重复渲染，效果更佳。

然后通过动画控制整体的透明度变化实现动效。

再通过:empty伪类实现对#app是否渲染的判断。:empty会在对应的元素内部没有任何内容时生效。

不多说，直接上代码：

html,
body,
#app {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: #12161f;
}

#app:empty {
    background-image: linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352), linear-gradient(90deg, #262c3b 30px, #3e4352);
    background-size: 350px 30px, 350px 100px, 350px 30px, 110px 40px, 110px 40px, 110px 40px, 350px 30px, 350px 40px, 110px 150px, 110px 150px, 110px 150px, 110px 40px, 110px 40px, 110px 40px, 350px 80px, 350px 80px, 350px 80px;
    background-position: 12.5px 10px, 12.5px 50px, 12.5px 160px, 12.5px 200px, 132.5px 200px, 252.5px 200px, 12.5px 250px, 12.5px 290px, 12.5px 340px, 132.5px 340px, 252.5px 340px, 12.5px 520px, 132.5px 520px, 252.5px 520px, 12.5px 570px, 12.5px 660px, 12.5px 750px;
    background-repeat: no-repeat;
    animation: theme1-skeleton-blink 1.2s ease-in-out infinite;
}

@keyframes theme1-skeleton-blink {
    50% {
        opacity: 0.6;
    }
}

我这骨架略微复杂，就没有使用y轴重复。

这里基本就行了，由于vite会对index.html中的style样式进行转换，所以如果你使用了rem或者vw，得到最终css其实是已经单位转换后的值，所以大小屏适配也没有问题了。