使用 CSS 实现一个简单的骨架屏（Skeleton Screen）(2)-木庄网络博客

当前第2页返回上一页

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,利用上边的公式，第一帧的动画中，背景图相对容器偏移的真实值是

1	`(100px-400px)*100% = -300px`

最后一帧实际偏移

1	`(100px-400px)*0% = 0`

动画的过程实际就是一个3倍容器宽的线性背景图片相对于容器的偏移从-300px到0的变化的过程。

更多相关教程推荐：《PHP编程入门教程》

以上就是使用 CSS 实现一个简单的骨架屏（Skeleton Screen）的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » 使用 CSS 实现一个简单的骨架屏（Skeleton Screen）

使用 CSS 实现一个简单的骨架屏（Skeleton Screen）

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论