CSS实现SkeletonScreen骨架屏效果-创新互联

这篇文章给大家分享的是有关CSS实现Skeleton Screen骨架屏效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

在顺庆等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、成都网站制作 网站设计制作定制网站开发,公司网站建设,企业网站建设,品牌网站设计,营销型网站,成都外贸网站制作,顺庆网站建设费用合理。

在加载网络数据时，为了提升用户体验，通常会使用一个转圈圈的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的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 的变化的过程。

感谢各位的阅读！关于“CSS实现Skeleton Screen骨架屏效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

网站题目：CSS实现SkeletonScreen骨架屏效果-创新互联
新闻来源：https://www.cdcxhl.com/article38/joesp.html

成都网站建设公司_创新互联，为您提供网页设计公司、关键词优化、商城网站、小程序开发、动态网站、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联