CSS实现骨架屏 Skeleton 效果
转自:掘金 - CodingStartup起码课
https://juejin.cn/post/6916748944789733390
现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而提升用户体验:
这个效果中文叫作骨架屏,英文叫 Skeleton,今期会跟大家分享在 CSS 上实现这个效果的方法。
HTML 的部分
打开 CodePen 编辑器,在 HTML 的部份加入一些结构,例如是一张卡片。新增一个 <div>
标签,class
名为 card
;这张卡会有一张图片,加入一个 <div>
,class
名为 image
,在里面加入一张图片。然后就是标题和内文,新增一个 <div>
,class
名为 content
。在里面新增一个 <h4>
标签用来显示标题,而另一个 <div>
,class
名为 description
,就用来显示内文。
CSS 的部分
去到 CSS 的部份,先处理好这张卡的样式。加入 body
选择器,设定背景颜色是浅灰色,字体是 Helvetica
,文字大小是 15px
,然后用 Flexbox 的方式将内容上下左右居中。
加入 .card
选择器,设定宽度是 320px
,背景颜色设定为白色,这样背景的浅灰色就能够衬托出这个白色。加一点圆角,设定为 6px
,由于在里面会加入图片,为了让图片都可以套用上圆角,设定 overflow
为 hidden
,再加入阴影,很轻微就可以了。
然后设定图片容器的样式,加入 .image
选择器,设定高度为 200px
。然后里面的图片,加入 .image img
选择器,设定 display
为 block
,宽度是 100%
。高度就继承自父容器,设定为 inherit
,为了保持图片的比例,将 object-fit
设定为 cover
。
再来内容的部份,加入 .content
选择器,设定 padding
为上下 2rem
,左右 1.8rem
;加入 h4
选择器,设定标题的样式,margin
设定为上左右都是 0
,下是 1rem
;文字大小和行距都设定为 1.5rem
。
最后就是内文,加入 .description
选择器,文字大小设定为 1rem
,行距设定为 1.4rem
,现在这张卡的样式就完成了。
制作骨架屏
回到 HTML 的部份,复制多一张卡片,不过清空里面的图片和文字,以及加入一个名为 loading
的 class
,我们会将骨架屏的效果套用到这张卡片上。
去到 CSS 的部份,将 body
里面的 justify-content
的设定值,更改为 space-evenly
,这样两张卡就可平均分配空白位置。然后由于稍后会于多处用到同一种灰色,我会将这个灰色定义为 CSS 变量,加入 :root
选择器,设定 --loading-grey
为浅灰色。
我们有三个位置需要加入灰色的骨架,分别是图片、标题和内文。所以将这三个选择器的背景颜色都设定为浅灰色。
而标题和内文需要个别设定一些样式,加入 .loading h4
选择器,设定标题位置的样式,将 min-height
设定为 1.6rem
,圆角设定为 4px
。再加入 .loading .description
选择器,设定内文位置的样式,这里的高度设定多一点,min-height
设定为 4rem
,圆角同样设定为 4px
。
动画的部分
现在基本上完成了一个静态的骨架屏了,接下来处理动画的部份。骨架屏的动画是好像一条光束由左至右扫过去的,所以我会将背景设定为渐层颜色。加入 background
,设定为 linear-gradient()
,角度倾斜一点,设定为 100deg
;然后由全透明的白色,位置在 40%
;渐变为半透明的白色,位置在 50%
;再到全透明的白色,位置在 60%
。之后再补上基础的背景颜色,浅灰色,现在就可以看到这条光束了。
那么要怎样进行动画呢,我会先将这个背景的宽度,拉成两倍大小,设定为 200%
,高度维持是 100%
。这样就可以通过 background-position
控制背景的位移,从而达到扫光的效果。现在当 background-position-x
设定为 100%
,光的部份会在左边,而设定为 0%
的话,光的部份会在右边,所以由大的数字改变到小的数字就可以实现左至右的扫光。不过这还不够,我们需要左右预留一些缓冲,才可以将光由外面扫入,所以先把它改为 120%
。
然后定义一个 @keyframes
名为 loading
,加入 to
的区块,设定 background-position-x
为 -20%
。加入动画的设定,设定为 1
秒,动画名称是 loading
,加速度是 ease-in-out
,重覆次数是无限 infinite
。
可以看到扫光效果已出现了,我想它扫入的时候快一点,间隔时间稍多一点,可以直接将原来的 background-position-x
更改为更大的值,例如 180%
,这样背景就因为需要移动更长的距离,从而达到效果。
最后,再来一点微调,光束是斜的,如何可以做到三个灰色位置的光束看起来是同一条呢?只需要稍为延迟一下标题和内文的动划开始时间就可以了,设定标题的 animation-delay
为 .05s
,而内文的 animation-delay
为 .06s
。
我们来看看这个案例的完成效果
这里介绍了用 CSS 编写骨架屏效果的方法,大家在实际应用中,只需要在数据载入的时候,为容器加上 loading
这个 class
;而在数据载入完成后,将数据显示到指定位置,并且将 loading
这个 class
移除即可,在这里就不再展开介绍了。以上,就是今期要介绍的全部内容。
这个案例的源代码在 https://codepen.io/stevenlei/pen/NWRBYJP
最后
感谢阅读,欢迎分享给身边的朋友,
记得关注噢,黑叔带你飞!
亲,点这涨工资
CSS实现骨架屏 Skeleton 效果相关推荐
- 【CSS】骨架屏 Skeleton 效果
点击上方关注 前端技术江湖,一起学习,天天进步 现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而提升用户体验: 这个效果中文叫作骨架屏,英文叫 Skeleto ...
- Android中骨架屏(Skeleton Screen)使用
Android中骨架屏(Skeleton Screen)使用 1.什么是骨架屏 页面在没有完全渲染完成之前,用户会看到一个占位的样式,用以描绘了当前页面的大致框架,加载完成后,最终骨架屏中各个占位部分 ...
- vue-cli 构建的项目如何加入骨架屏 skeleton
在使用 Native APP 时我们经常可以看到在实际内容加载出来之前会有一些 占位图片,因为其结构和实际加载内容相似(如新闻页面加载之前也会有一个纵向列表),因此让用户感知到自己的页面正在加载中,体 ...
- #周分享#骨架屏[Skeleton Screen]
什么是骨架屏 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容.常用于文章列表.动态列表页等相对比较规则的列表页面 是进度条和菊花圈的 ...
- 骨架屏 (Skeleton Screen)
https://blog.csdn.net/lmh_19941113/article/details/87979419
- 如何实现骨架屏效果?
今天我们来用原生js实现一个骨架屏的效果,效果如下: 首先思考如何实现 思考实现方式 骨架屏的原理是在数据没加载出来的时候,使用滚动的背景颜色去替代,等到加载完毕后则显示对应内容 那么我们的核心就是实 ...
- Skeleton Screen — 骨架屏
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. 一种 ...
- 获取当前横竖屏_Chrome扩展程序一键生成网页骨架屏
对于依赖接口渲染的页面,在拿到数据之前页面往往是空白的,为了提示用户当前正在加载中,往往会使用进度条.loading图标或骨架屏的方式.对于前两种方案而言,实现比较简单:本文主要研究骨架屏的应用及实现 ...
- vue中获取到的为什么图片地址会自动拼接上localhost:8080_前端骨架屏自动生成方案(很实用!收藏)...
来源:花满楼 https://zhuanlan.zhihu.com/p/74403911 什么是骨架屏? 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示 ...
最新文章
- 基于python的开源商业软件套装 Odoo 简介
- vuex实践之路——笔记本应用(三)
- 时序数据-LSTM模型-实现用电量预测
- 如果产品经理去卖土豆粉
- R语言 文本挖掘 tm包 使用
- Android快速开发系列 10个常用工具类
- 每天只睡 4 小时!大佬们都这么拼吗?
- win用户计算机批量添加用户,在WIN2K3AD中用dsadd批量添加域用户
- SVN提交文件冲突怎么办?
- 如何快速批量新建文本文档(txt)?
- 法务管理项目结项了mark一下
- 【2022最新】最新桌面CPU显卡天梯图
- spssfisher判别分析步骤_SPSS判别分析
- 小米笔记本Air13.3加装固态硬盘
- NXP JN5169 ZigBee 3.0开发环境搭建
- WTS:基于Web的Terminal控制台
- html5的class属性值,HTML class 属性 | 菜鸟教程
- angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider - $scope - testServe
- oracle11g GI+RAC卸载
- elasticsearch从入门到入门系列(一)---简单介绍及安装
热门文章
- 阿翔编程学-Axis传递Pojo对象
- Php Adodb 初探
- ubuntu18.04安装Realsense D435i 摄像头的驱动SDK和ROS Wrapper
- 盘点阿里云服务器活动【最新活动】2核4G 1M带宽 40G高效云盘 云服务器【19/月,269/年,699/3年】
- 【windows2008R2问题2】Windows Server® 2008 Enterprise 组件服务 找不到 ”Microsoft Word 97 - 2003 文档“组件...
- NLP16-总结之一[dict,tfidf,word2vec,关键词,simhash]
- Cannot access ‘androidx.lifecycle.HasDefaultViewModelProviderFactory‘ which is a supertype of ‘com.e
- (附源码)Python宿舍管理系统 毕业设计231642
- p5.js 交互应用实战 —— 音乐可视化(案例)
- Vue3商店后台管理系统设计文稿篇(四)