【CSS】骨架屏 Skeleton 效果
发布时间 ：2021/08/26
作者：CodingStartup起码课
https://juejin.cn/post/6915763034069663752
现在很多365手机app_彩票365app老版本软件下载_365网站打不开了 在加载数据的时候，为了避免页面过于，都会用这种方式预告将会有内容载入，从而用户体验：
这个中文叫作骨架屏，英文叫 Skeleton，今期会跟大家分享在 CSS 上实现这个的方法。
HTML 的部分
打开 CodePen 编辑器，在 HTML 的部份加入一些结构，例如是一张卡片。新增一个
标签用来显示标题，而另一个 ，class 名为 description，就用来显示内文。
CSS 的部分
去到 CSS 的部份，先处理好这张卡的样式。加入 body 选择器，设定背景颜色是浅灰色，字体是 Helvetica，文字大小是 15px，然后用 Flexbox 的方式将内容上下左右居中。
加入 .card 选择器，设定宽度是 320px，背景颜色设定为白色，这样背景的浅灰色就能够衬托出这个白色。加一点圆角，设定为 6px，由于在里面会加入图片，为了让图片都可以套用上圆角，设定 overflow 为 hidden，再加入阴影，很轻微就可以了。
然后设定图片容器的样式，加入 .image 选择器，设定高度为 200px。然后里面的图片，加入 .image img 选择器，设定 display 为 block，宽度是 。高度就继承自父容器，设定为 inherit，为了保持图片的比例，将 object-fit 设定为 cover。
再来内容的部份，加入 .content 选择器，设定 padding 为上下 2rem，左右 1.8rem；加入 h4 选择器，设定标题的样式，margin 设定为上左右都是 0，下是 1rem；文字大小和行距都设定为 1.5rem。
后就是内文，加入 .description 选择器，文字大小设定为 1rem，行距设定为 1.4rem，现在这张卡的样式就完成了。
制作骨架屏
回到 HTML 的部份，复制多一张卡片，不过清空里面的图片和文字，以及加入一个名为 loading 的 class，我们会将骨架屏的套用到这张卡片上。
去到 CSS 的部份，将 body 里面的 justify-content 的设定值，更改为 space-evenly，这样两张卡就可平均分配位置。然后由于稍后会于多处用到同一种灰色，我会将这个灰色定义为 CSS 变量，加入 :root 选择器，设定 --loading-grey 为浅灰色。
我们有三个位置需要加入灰色的骨架，分别是图片、标题和内文。所以将这三个选择器的背景颜色都设定为浅灰色。
而标题和内文需要个别设定一些样式，加入 .loading h4 选择器，设定标题位置的样式，将 min-height 设定为 1.6rem，圆角设定为 4px。再加入 .loading .description 选择器，设定内文位置的样式，这里的高度设定多一点，min-height 设定为 4rem，圆角同样设定为 4px。
动画的部分
现在基本上完成了一个静态的骨架屏了，接下来处理动画的部份。骨架屏的动画是好像一条光束由左右扫过去的，所以我会将背景设定为渐层颜色。加入 background，设定为 linear-gradient()，角度倾斜一点，设定为 100deg；然后由全透明的白色，位置在 40%；渐变为半透明的白色，位置在 50%；再到全透明的白色，位置在 60%。之后再补上基础的背景颜色，浅灰色，现在就可以看到这条光束了。
那么要怎样进行动画呢，我会先将这个背景的宽度，拉成两倍大小，设定为 200%，高度维持是 。这样就可以通过 background-position 控制背景的位移，从而达到扫光的。现在当 background-position-x 设定为 ，光的部份会在左边，而设定为 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 移除即可，在这里就不再展开介绍了。以上，就是今期要介绍的全部内容。
相关新闻
- 2016/10/22
网络公司网页设计时候一定要避免这些视觉错误
- 2016/10/10 内蒙古网络公司分享怎么学习网页设计
- 2011/03/31 365手机app_彩票365app老版本软件下载_365网站打不开了
建设中网页设计用户体验为什么不能被设计出来？
- 2016/10/06 内蒙古网页设计没有用户体验一切为零
- 2016/12/06 这些网页设计2017年将会比较热门
标签：
网页设计 365手机app_彩票365app老版本软件下载_365网站打不开了
建设
CSS 的部分
去到 CSS 的部份，先处理好这张卡的样式。加入 body 选择器，设定背景颜色是浅灰色，字体是 Helvetica，文字大小是 15px，然后用 Flexbox 的方式将内容上下左右居中。
加入 .card 选择器，设定宽度是 320px，背景颜色设定为白色，这样背景的浅灰色就能够衬托出这个白色。加一点圆角，设定为 6px，由于在里面会加入图片，为了让图片都可以套用上圆角，设定 overflow 为 hidden，再加入阴影，很轻微就可以了。
然后设定图片容器的样式，加入 .image 选择器，设定高度为 200px。然后里面的图片，加入 .image img 选择器，设定 display 为 block，宽度是 。高度就继承自父容器，设定为 inherit，为了保持图片的比例，将 object-fit 设定为 cover。
再来内容的部份，加入 .content 选择器，设定 padding 为上下 2rem，左右 1.8rem；加入 h4 选择器，设定标题的样式，margin 设定为上左右都是 0，下是 1rem；文字大小和行距都设定为 1.5rem。
后就是内文，加入 .description 选择器，文字大小设定为 1rem，行距设定为 1.4rem，现在这张卡的样式就完成了。
制作骨架屏
回到 HTML 的部份，复制多一张卡片，不过清空里面的图片和文字，以及加入一个名为 loading 的 class，我们会将骨架屏的套用到这张卡片上。
去到 CSS 的部份，将 body 里面的 justify-content 的设定值，更改为 space-evenly，这样两张卡就可平均分配位置。然后由于稍后会于多处用到同一种灰色，我会将这个灰色定义为 CSS 变量，加入 :root 选择器，设定 --loading-grey 为浅灰色。
我们有三个位置需要加入灰色的骨架，分别是图片、标题和内文。所以将这三个选择器的背景颜色都设定为浅灰色。
而标题和内文需要个别设定一些样式，加入 .loading h4 选择器，设定标题位置的样式，将 min-height 设定为 1.6rem，圆角设定为 4px。再加入 .loading .description 选择器，设定内文位置的样式，这里的高度设定多一点，min-height 设定为 4rem，圆角同样设定为 4px。
动画的部分
现在基本上完成了一个静态的骨架屏了，接下来处理动画的部份。骨架屏的动画是好像一条光束由左右扫过去的，所以我会将背景设定为渐层颜色。加入 background，设定为 linear-gradient()，角度倾斜一点，设定为 100deg；然后由全透明的白色，位置在 40%；渐变为半透明的白色，位置在 50%；再到全透明的白色，位置在 60%。之后再补上基础的背景颜色，浅灰色，现在就可以看到这条光束了。
那么要怎样进行动画呢，我会先将这个背景的宽度，拉成两倍大小，设定为 200%，高度维持是 。这样就可以通过 background-position 控制背景的位移，从而达到扫光的。现在当 background-position-x 设定为 ，光的部份会在左边，而设定为 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 移除即可，在这里就不再展开介绍了。以上，就是今期要介绍的全部内容。
- 2016/10/22 网络公司网页设计时候一定要避免这些视觉错误
- 2016/10/10 内蒙古网络公司分享怎么学习网页设计
- 2011/03/31 365手机app_彩票365app老版本软件下载_365网站打不开了
建设中网页设计用户体验为什么不能被设计出来？
- 2016/10/06 内蒙古网页设计没有用户体验一切为零
- 2016/12/06 这些网页设计2017年将会比较热门