在加载网络数据时，为了 提升 用户体验，通常会使用一个转圈圈的loading动画， 或者 使用Skeleton Screen占位。相比与loading动画，Skeleton Screen的效果要更生动，实现起来来也很 简单 。 利用 CSS就可以实现一个简单的Skeleton Screen。
思路
HT ML 搭建骨架 CSS加样式 CSS加动画从搭建骨架 开始
骨架结构很简单，只是随意的放几个你喜欢的块级元素就ok了。
<div class='screen-root'>
<ul>
<li/>
<li/>
<li/>
</ul>
</div>
你看，就是这样简简单单。
CSS上色
我们常看到的骨架屏是这个样子的
为了方便描述，增强对比，我会先做一个鬼畜版的
&nbs p;
首先利用css的 linear-gra die nt 属性画一个红中带点绿的渐变图片，并把它当作背景填充给 li
标签
linear-gradient()可以创建一个多种颜色线性渐变的图片，想 了解 更多可以看 这里
li{
background -i mage: linear-gradient(90 deg , # ff0000 25%, #41de6a 37%, #ff0000 63%);
width: 100%;
h ei ght: 0.6rem;
list -s tyle: none;
}
实际使用中将渐变图换成 正常 的颜色，如： background-image: linear-gradient(90deg, # f2 f2f2 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-pos IT ion: 100% 50%;
animation: skeleton-loading 1.4s ease infinite;
}
@keyfr am es skeleton-loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
这里给 background-position 属性设置了两个值，第一个值代表水平位置相对容器的偏移，第二个代表垂直位置相对容器的偏移。
使用百分比设置 background-position 值时，它会执行一个计算实际定位值公式 (cont ai ner width - image width) * (position x%) = (x offset value) ，即容器和图片的 宽 度差乘上设置的百分比定位值，得到的结果就是实际的偏移值，将 background-size 的宽度设置为400%的其中一个目的就是，这样就会和容器产生宽度差。
有 同学 可能会问，将 background-size 值设为50%，也可以和容器产生宽度差。是的，但是这样，背景图片会平铺整个容器，你会惊喜的发现，绿点变成了do ub le。
你可以试着给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 的变化的过程。
总结
到此这篇关于CSS实 现S keleton Screen（骨架屏）的 文章 就介绍到这了,更多相关CSS实现Skeleton Screen 骨架屏内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 CSS实现Skeleton Screen骨架屏效果 全部内容，希望文章能够帮你解决 CSS实现Skeleton Screen骨架屏效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS实现Skeleton Screen骨架屏效果的详细内容...