CSS实现SkeletonScreen的方法-创新互联
前言
在加载网络数据时,为了提升用户体验,通常会使用一个转圈圈的loading动画,或者使用Skeleton Screen占位。相比与loading动画,Skeleton Screen的效果要更生动,实现起来来也很简单。利用CSS就可以实现一个简单的Skeleton Screen。
创新互联建站是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,小程序开发,十余年建站对成都玻璃隔断等多个行业,拥有丰富的网站维护经验。从搭建骨架开始
骨架结构很简单,只是随意的放几个你喜欢的块级元素就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
的变化的过程。
以上就是使用 CSS 实现一个简单的骨架屏(Skeleton Screen)的详细内容,更多请关注创新互联成都网站设计公司其它相关文章!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章题目:CSS实现SkeletonScreen的方法-创新互联
分享路径:http://pwwzsj.com/article/dgijee.html