前言
在加载网络数据时，为了提升用户体验，通常会使用一个转圈圈的loading动画，或者使用skeleton screen占位。相比与loading动画，skeleton screen的效果要更生动，实现起来来也很简单。利用css就可以实现一个简单的skeleton screen。（什么是骨架屏（skeleton screen）？）
推荐学习：CSS视频教程、CSS教程（图文）
思路
HTML搭建骨架
CSS加样式
CSS加动画
从搭建骨架开始
骨架结构很简单，只是随意的放几个你喜欢的块级元素就ok了。
立即学习“前端免费学习笔记（深入）”；
你看，就是这样简简单单。
CSS上色
我们常看到的骨架屏是这个样子的
为了方便描述，增强对比，我会先做一个鬼畜版的
首先利用css的 linear-gradient 属性画一个红中带点绿的渐变图片，并把它当作背景填充给li标签
linear-gradient()可以创建一个多种颜色线性渐变的图片，想了解更多可以看这里
li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none;}
实际使用中将渐变图换成正常的颜色，如：
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%)
让它动起来
剩下要做的就是让中间的绿色动起来
你可以想一下有什么办法让它动？
这里用到的是，通过拉伸背景图片，动态设置背景定位百分比，改变背景定位，从而计算得到图片相对容器的不同偏移值，以此实现了动画的效果。
li{ background-image: linear-gradient(90deg, #ff0000 25%, #41de6a 37%, #ff0000 63%); width: 100%; height: 0.6rem; list-style: none; background-size: 400% 100%; background-position: 100% 50%; animation: skeleton-loading 1.4s ease infinite;}@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; }}
这里给background-position属性设置了两个值，第一个值代表水平位置相对容器的偏移，第二个代表垂直位置相对容器的偏移。
使用百分比设置background-position值时，它会执行一个计算实际定位值公式(container width - image width) * (position x%) = (x offset value)，即容器和图片的宽度差乘上设置的百分比定位值，得到的结果就是实际的偏移值，将background-size的宽度设置为400%的其中一个目的就是，这样就会和容器产生宽度差。
有同学可能会问，将background-size值设为50%，也可以和容器产生宽度差。是的，但是这样，背景图片会平铺整个容器，你会惊喜的发现，绿点变成了double。
你可以试着给background-size设置不同的值，观察它的表现，并想一下为什么会这样。
最后利用关键帧动画，设置background-position在x坐标的值从100%到0%
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; }}
假设容器的宽度是100px,那么背景图片的宽度就是400px,利用上边的公式，第一帧的动画中，背景图相对容器偏移的真实值是
(100px-400px)*100% = -300px
最后一帧实际偏移
(100px-400px)*0% = 0
动画的过程实际就是一个3倍容器宽的线性背景图片相对于容器的偏移从-300px到0的变化的过程。
更多相关教程推荐：《PHP编程入门教程》
以上就是使用 CSS 实现一个简单的骨架屏（Skeleton Screen）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1615442.html
微信扫一扫 
支付宝扫一扫 
