清风细雨楼

CSS实现Skeleton Screen骨架屏效果
网页制作 2024/12/27 佚名
3 1
清风细雨楼 Design By www.eepep.com

在加载网络数据时，为了提升用户体验，通常会使用一个转圈圈的loading动画，或者使用Skeleton Screen占位。相比与loading动画，Skeleton Screen的效果要更生动，实现起来来也很简单。利用CSS就可以实现一个简单的Skeleton Screen。

思路

  • HTML搭建骨架
  • CSS加样式
  • CSS加动画

从搭建骨架开始

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

<div class='screen-root'>
  <ul>
    <li/>
    <li/>
    <li/>
  </ul>
</div>

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

CSS上色

我们常看到的骨架屏是这个样子的

CSS实现Skeleton Screen骨架屏效果

为了方便描述，增强对比，我会先做一个鬼畜版的

CSS实现Skeleton Screen骨架屏效果 

首先利用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;
}

CSS实现Skeleton Screen骨架屏效果

实际使用中将渐变图换成正常的颜色，如： 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 的变化的过程。

总结

清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com