运用CSS实现一个简略的骨架屏(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倍容器宽的线性配景图片相关于容器的偏移从-300px
到0
的变化的历程。
更多相干教程举荐:《PHP编程入门教程》
以上就是运用 CSS 实现一个简略的骨架屏(Skeleton Screen)的细致内容,更多请关注 百分百源码网 其它相干文章!