用CSS怎样成功实现骨架屏？实现思路和方法是什么？

发布时间：2023-08-05 14:24:03 所属栏目：语言来源：

导读：　　用CSS怎样实现骨架屏？一些朋友可能对骨架屏不是很了解，在需要加载网络数据场景，为了提升用户体验，我们常常会看到一个转圈圈的loading动画，而骨架屏就可以实现这样的loading动画效果，而且相比loading动画，

　　用CSS怎样实现骨架屏？一些朋友可能对骨架屏不是很了解，在需要加载网络数据场景，为了提升用户体验，我们常常会看到一个转圈圈的loading动画，而骨架屏就可以实现这样的loading动画效果，而且相比loading动画，骨架屏的效果更好，实现更简单，接下来我们就来具体了解看看用CSS是怎样实现骨架屏吧。

　　思路

　　HTML搭建骨架

　　CSS加样式

　　CSS加动画

　　从搭建骨架开始

　　骨架结构很简单，只是随意的放几个你喜欢的块级元素就ok了。

　　<div class='screen-root'>

　　 <ul>

　　    <li/>

　　    <li/>

　　    <li/>

　　 </ul>

　　</div>

　　你看，就是这样简简单单。

　　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 的变化的过程。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!