【CSS实现】骨架屏 Skeleton 效果

浅浅的花香味﹌ 2022-09-10 14:09 248阅读 0赞

# 大厂技术 高级前端 Node进阶    #

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

> 转自：掘金 - CodingStartup起码课
> 
> https://juejin.cn/post/6916748944789733390

现在很多网站在加载数据的时候，为了避免页面过于空白，都会用这种方式预告将会有内容载入，从而提升用户体验：

![26fa448f82dd7615219de65f36a6013d.gif][]

这个效果中文叫作**骨架屏**，英文叫 **Skeleton**，今期会跟大家分享在 CSS 上实现这个效果的方法。

## HTML 的部分 ##

打开 CodePen 编辑器，在 HTML 的部份加入一些结构，例如是一张卡片。新增一个 `<div>` 标签，`class` 名为 `card`；这张卡会有一张图片，加入一个 `<div>`，`class` 名为 `image`，在里面加入一张图片。然后就是标题和内文，新增一个 `<div>`，`class` 名为 `content`。在里面新增一个 `<h4>` 标签用来显示标题，而另一个 `<div>`，`class` 名为 `description`，就用来显示内文。

![54ad23bdd84dd5e6c0b040a6991ce613.png][]

## CSS 的部分 ##

去到 CSS 的部份，先处理好这张卡的样式。加入 `body` 选择器，设定背景颜色是浅灰色，字体是 `Helvetica`，文字大小是 `15px`，然后用 Flexbox 的方式将内容上下左右居中。

![2217424cb7a8ee13261f847954e99dda.png][]

加入 `.card` 选择器，设定宽度是 `320px`，背景颜色设定为白色，这样背景的浅灰色就能够衬托出这个白色。加一点圆角，设定为 `6px`，由于在里面会加入图片，为了让图片都可以套用上圆角，设定 `overflow` 为 `hidden`，再加入阴影，很轻微就可以了。

![82a006b7281b0fb4aeaa85d56b118722.png][]

然后设定图片容器的样式，加入 `.image` 选择器，设定高度为 `200px`。然后里面的图片，加入 `.image img` 选择器，设定 `display` 为 `block`，宽度是 `100%`。高度就继承自父容器，设定为 `inherit`，为了保持图片的比例，将 `object-fit` 设定为 `cover`。

![57abd7c9133aa8f39d93dd2466a5f898.png][]

再来内容的部份，加入 `.content` 选择器，设定 `padding` 为上下 `2rem`，左右 `1.8rem`；加入 `h4` 选择器，设定标题的样式，`margin` 设定为上左右都是 `0`，下是 `1rem`；文字大小和行距都设定为 `1.5rem`。

![c88f3325206b83e710e7b5abfab55f0c.png][]

最后就是内文，加入 `.description` 选择器，文字大小设定为 `1rem`，行距设定为 `1.4rem`，现在这张卡的样式就完成了。

![1544bdbb15e99737b594893f1616cc96.png][]

## 制作骨架屏 ##

回到 HTML 的部份，复制多一张卡片，不过清空里面的图片和文字，以及加入一个名为 `loading` 的 `class`，我们会将骨架屏的效果套用到这张卡片上。

![67a8432dc53cb10f0873141f5d097b3a.png][]

去到 CSS 的部份，将 `body` 里面的 `justify-content` 的设定值，更改为 `space-evenly`，这样两张卡就可平均分配空白位置。然后由于稍后会于多处用到同一种灰色，我会将这个灰色定义为 CSS 变量，加入 `:root` 选择器，设定 `--loading-grey` 为浅灰色。

![3190fe7fd6bafb7c4cd2bcb08a85ba6c.png][]

我们有三个位置需要加入灰色的骨架，分别是图片、标题和内文。所以将这三个选择器的背景颜色都设定为浅灰色。

![dde9ce7b15cf7a2b22d587b4c265788c.png][]

而标题和内文需要个别设定一些样式，加入 `.loading h4` 选择器，设定标题位置的样式，将 `min-height` 设定为 `1.6rem`，圆角设定为 `4px`。再加入 `.loading .description` 选择器，设定内文位置的样式，这里的高度设定多一点，`min-height` 设定为 `4rem`，圆角同样设定为 `4px`。

![e2a990a87e1d77709ee88a75214f71e1.png][]

## 动画的部分 ##

现在基本上完成了一个静态的骨架屏了，接下来处理动画的部份。骨架屏的动画是好像一条光束由左至右扫过去的，所以我会将背景设定为渐层颜色。加入 `background`，设定为 `linear-gradient()`，角度倾斜一点，设定为 `100deg`；然后由全透明的白色，位置在 `40%`；渐变为半透明的白色，位置在 `50%`；再到全透明的白色，位置在 `60%`。之后再补上基础的背景颜色，浅灰色，现在就可以看到这条光束了。

![2763d8325ef4e9a9271b2d7a5a127ff8.png][]

那么要怎样进行动画呢，我会先将这个背景的宽度，拉成两倍大小，设定为 `200%`，高度维持是 `100%`。这样就可以通过 `background-position` 控制背景的位移，从而达到扫光的效果。现在当 `background-position-x` 设定为 `100%`，光的部份会在左边，而设定为 `0%` 的话，光的部份会在右边，所以由大的数字改变到小的数字就可以实现左至右的扫光。不过这还不够，我们需要左右预留一些缓冲，才可以将光由外面扫入，所以先把它改为 `120%`。

![c3b8bc20ce41bab15040abf9157496c2.png][]

然后定义一个 `@keyframes` 名为 `loading`，加入 `to` 的区块，设定 `background-position-x` 为 `-20%`。加入动画的设定，设定为 `1` 秒，动画名称是 `loading`，加速度是 `ease-in-out`，重覆次数是无限 `infinite`。

![1a0ae7f57b5c48b57b372ab7245e5326.png][]

可以看到扫光效果已出现了，我想它扫入的时候快一点，间隔时间稍多一点，可以直接将原来的 `background-position-x` 更改为更大的值，例如 `180%`，这样背景就因为需要移动更长的距离，从而达到效果。

![78dbf5ed033e8a03aeb7a81b251f0b26.png][]

最后，再来一点微调，光束是斜的，如何可以做到三个灰色位置的光束看起来是同一条呢？只需要稍为延迟一下标题和内文的动划开始时间就可以了，设定标题的 `animation-delay` 为 `.05s`，而内文的 `animation-delay` 为 `.06s`。

![f365235b6f67b508b522e9205a19070f.png][]

## 我们来看看这个案例的完成效果 ##

![ecab25848b1180d4c0471f896b3e3453.gif][]

这里介绍了用 CSS 编写骨架屏效果的方法，大家在实际应用中，只需要在数据载入的时候，为容器加上 `loading` 这个 `class`；而在数据载入完成后，将数据显示到指定位置，并且将 `loading` 这个 `class` 移除即可，在这里就不再展开介绍了。以上，就是今期要介绍的全部内容。

--------------------

这个案例的源代码在 https://codepen.io/stevenlei/pen/NWRBYJP

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

![69181b49a65b7938ae86eba74fda1980.png][]

**“分享、点赞、在看” 支持一波** ![8230aa8865fc98e595996094f894307e.png][]

[26fa448f82dd7615219de65f36a6013d.gif]: /images/20220829/1d4a6735a1ba47e8b225cda4ebcc1c4c.png
[54ad23bdd84dd5e6c0b040a6991ce613.png]: /images/20220829/a4c8bdb1af9e47d5bcbf44d190bc636f.png
[2217424cb7a8ee13261f847954e99dda.png]: /images/20220829/04c746c1cc354cf0814fed12b151ff79.png
[82a006b7281b0fb4aeaa85d56b118722.png]: /images/20220829/dfab5d221faa4d77b750f280e02b0b9f.png
[57abd7c9133aa8f39d93dd2466a5f898.png]: /images/20220829/97cd46b86fc942389a67080b09862c5b.png
[c88f3325206b83e710e7b5abfab55f0c.png]: /images/20220829/fe30e4235b2640f3b1d12ec764f5d456.png
[1544bdbb15e99737b594893f1616cc96.png]: /images/20220829/a267fefa5d424742976b689597944ccf.png
[67a8432dc53cb10f0873141f5d097b3a.png]: /images/20220829/d0775c15fec94d79a2b935c86fe3f05f.png
[3190fe7fd6bafb7c4cd2bcb08a85ba6c.png]: /images/20220829/cf693ff193604c779d5e15a26a663f36.png
[dde9ce7b15cf7a2b22d587b4c265788c.png]: /images/20220829/50ceaab3748340a2a4e26a9c34957ac1.png
[e2a990a87e1d77709ee88a75214f71e1.png]: /images/20220829/2e5e09eb507140b7a315d0b13ccad51f.png
[2763d8325ef4e9a9271b2d7a5a127ff8.png]: /images/20220829/a6114a9275144e52b825cb246bcb6c1b.png
[c3b8bc20ce41bab15040abf9157496c2.png]: /images/20220829/39dd1854ba6140bab17d110776a50e91.png
[1a0ae7f57b5c48b57b372ab7245e5326.png]: /images/20220829/de573cdbd6c44eb59abd4f5bb09582af.png
[78dbf5ed033e8a03aeb7a81b251f0b26.png]: /images/20220829/66fc7bc8c196444ba6b857e5e58154a3.png
[f365235b6f67b508b522e9205a19070f.png]: /images/20220829/572e6dce08a94e9e90e68e70bd81aece.png
[ecab25848b1180d4c0471f896b3e3453.gif]: /images/20220829/2af7ace40f754c8ca29b661b51467ab6.png
[69181b49a65b7938ae86eba74fda1980.png]: /images/20220829/87b0682c0e604876b335d824d75b2c46.png
[8230aa8865fc98e595996094f894307e.png]: /images/20220829/5d234871bf274f08a1581d5b53bd161d.png