CSS骨架屏Secleton效果

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

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

HTML的部分****

CSS的部分****

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

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

然后设定图片容器的样式

再来内容的部分

最后就是内文

制作骨架屏****

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

在CSS中，将body里面额justify-content的值改为space-evevly，这样两张卡片就可以平均分配空白位置，然后由于稍后会于多出用到同一种灰色，将这个灰色定义为CSS变量，加入:root选择器，设定--loading-grey为浅灰色

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

而标题和内文需要个别设定一些样式

动画部分****

现在基本上完成了一个静态的骨架屏了，接下来处理动画的部份。骨架屏的动画是好像一条光束由左至右扫过去的，将背景设定为渐层颜色。

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

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

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

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

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