百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 运用CSS实现一个简略的骨架屏(SkeletonScreen)
分享文章到:

运用CSS实现一个简略的骨架屏(SkeletonScreen)

发布时间:09/01 来源:未知 浏览: 关键词:
在加载网络数据时,为了提拔会员体验,平常会运用一个转圈圈的loading动画,或者运用SkeletonScreen占位。比拟与loading动画,SkeletonScreen的结果要更生动,实现起来来也很简略。

前言

在加载网络数据时,为了提拔会员体验,平常会运用一个转圈圈的loading动画,或者运用Skeleton Screen占位。比拟与loading动画,Skeleton Screen的结果要更生动,实现起来来也很简略。应用CSS就可以实现一个简略的Skeleton Screen。(什么是骨架屏(Skeleton Screen)?)

举荐学习:CSS视频教程、CSS教程(图文)

思绪

  • HTML搭建骨架

  • CSS加样式

  • CSS加动画

从搭建骨架开端

骨架构造很简略,只是随便的放几个你喜好的块级元素就ok了。

你看,就是这样简简略单。

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倍容器宽的线性配景图片相关于容器的偏移从-300px0的变化的历程。

更多相干教程举荐:《PHP编程入门教程》

以上就是运用 CSS 实现一个简略的骨架屏(Skeleton Screen)的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板