热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用CSS实现一个简单的骨架屏(SkeletonScreen)

在加载网络数据时,为了提升用户体验,通常会使用一个转圈圈的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)的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 探讨并提供解决方案以应对 'view is not in the window hierarchy' 的错误提示。 ... [详细]
  • 本文介绍了如何处理MySQL数据库中表 'xdb.auditlog' 被标记为已损坏的问题,并提供了解决方案。 ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • 本文详细介绍了一种实现PopupWindow全屏显示且能有效隐藏虚拟按键的技术方案,适用于Android开发。此方法经过实际测试,表现良好,兼容性优秀。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • 本文介绍了如何使用Maven命令对Spring Boot项目中的子模块进行独立打包,包括依赖树的查看、项目的运行和打包等基本操作。 ... [详细]
  • 深入理解异步多线程编程模型
    现代计算机系统中的CPU通过并行处理提高效率,但所谓的并发处理实际上是一种基于轮询的模拟并行。本文探讨了现代处理器如何通过虚拟化技术实现更高的并发性能,以及在.NET框架中如何有效利用线程和异步编程模式。 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • 本文通过具体示例详细介绍了 Python 中的装饰器和装饰类的使用方法,包括带参数的装饰器和装饰类的应用场景。 ... [详细]
  • 本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]
  • BL550721、特点液晶驱动输出:Common输出4线,Segment输出36线内置显示寄存器364144bit2线串行接口(SCL,SDA)内置震荡电路内置液晶驱动电源电路13 ... [详细]
  • 本文介绍了如何在Windows操作系统中安装FFTW库,并详细说明了使用Visual Studio 2010进行4096点快速傅里叶变换(FFT)的步骤。包括下载预编译文件、生成库文件以及配置环境等关键环节。 ... [详细]
  • javascript——对象的概念——函数 1 (函数对象的属性和方法)
    一、创建函数函数是一种对象:Function类是对象,可以通过Function实例化一个函数,不过最多的还是利用function来创建函数。方式一:利用Function类来实例化函 ... [详细]
  • IEC60825激光产品安全标准详解
    随着激光技术在全球范围内的广泛应用,尤其是激光投影显示技术的兴起,了解和遵守相关的安全标准变得尤为重要。本文将详细介绍IEC60825激光产品安全标准及其重要性。 ... [详细]
  • Mysqlcheck作为MySQL提供的一个实用工具,主要用于数据库表的维护工作,包括检查、分析、修复及优化等操作。本文将详细介绍如何使用Mysqlcheck工具,并提供一些实践建议。 ... [详细]
author-avatar
誓言俱乐部
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有