本文摘自PHP中文网，作者Guanhui，侵删。
前言
在加载网络数据时，为了提升用户体验，通常会使用一个转圈圈的loading动画，或者使用Skeleton Screen占位。相比与loading动画，Skeleton Screen的效果要更生动，实现起来来也很简单。利用CSS就可以实现一个简单的Skeleton Screen。（什么是骨架屏（Skeleton Screen）？）
推荐学习：CSS视频教程、CSS教程（图文）
思路
HTML搭建骨架
CSS加样式
CSS加动画
从搭建骨架开始
骨架结构很简单，只是随意的放几个你喜欢的块级元素就ok了。
1 2 3 4 5 6 |
|
你看，就是这样简简单单。
CSS上色
我们常看到的骨架屏是这个样子的
为了方便描述，增强对比，我会先做一个鬼畜版的
首先利用css的 linear-gradient 属性画一个红中带点绿的渐变图片，并把它当作背景填充给li标签
linear-gradient()可以创建一个多种颜色线性渐变的图片，想了解更多可以看这里
1 2 |
|
实际使用中将渐变图换成正常的颜色，如：
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)
让它动起来
剩下要做的就是让中间的绿色动起来
你可以想一下有什么办法让它动？
这里用到的是，通过拉伸背景图片，动态设置背景定位百分比，改变背景定位，从而计算得到图片相对容器的不同偏移值，以此实现了动画的效果。
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
