css骨架图,【CSS】骨架屏 Skeleton 效果
原标题:【CSS】骨架屏 Skeleton 效果
转自:掘金 - CodingStartup起码课
现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而提升用户体验:
这个效果中文叫作 骨架屏,英文叫 Skeleton,今期会跟大家分享在 CSS 上实现这个效果的方法。
HTML 的部分
打开 CodePen 编辑器,在 HTML 的部份加入一些结构,例如是一张卡片。
新增一个
然后就是标题和内文,新增一个
标签用来显示标题,而另一个
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 。
最后就是内文,加入 .deion 选择器,文字大小设定为 1rem ,行距设定为 1.4rem ,现在这张卡的样式就完成了。
制作骨架屏
回到 HTML 的部份,复制多一张卡片,不过清空里面的图片和文字,以及加入一个名为 loading 的 class ,我们会将骨架屏的效果套用到这张卡片上。
去到 CSS 的部份,将 body 里面的 justify-content 的设定值,更改为 space-evenly ,这样两张卡就可平均分配空白位置。
然后由于稍后会于多处用到同一种灰色,我会将这个灰色定义为 CSS 变量,加入 :root 选择器,设定 --loading-grey 为浅灰色。
我们有三个位置需要加入灰色的骨架,分别是图片、标题和内文。所以将这三个选择器的背景颜色都设定为浅灰色。
而标题和内文需要个别设定一些样式,加入 .loading h4 选择器,设定标题位置的样式,将 min-height 设定为 1.6rem ,圆角设定为 4px 。
再加入 .loading .deion 选择器,设定内文位置的样式,这里的高度设定多一点, 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骨架图,【CSS】骨架屏 Skeleton 效果相关推荐
- CSS实现骨架屏 Skeleton 效果
转自:掘金 - CodingStartup起码课 https://juejin.cn/post/6916748944789733390 现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方 ...
- 【CSS】骨架屏 Skeleton 效果
点击上方关注 前端技术江湖,一起学习,天天进步 现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而提升用户体验: 这个效果中文叫作骨架屏,英文叫 Skeleto ...
- html css 八卦图,CSS动画-八卦图
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 Document #in>div{ width:150px; height:80px; border:1pxsolid #ddd; position ...
- Android中骨架屏(Skeleton Screen)使用
Android中骨架屏(Skeleton Screen)使用 1.什么是骨架屏 页面在没有完全渲染完成之前,用户会看到一个占位的样式,用以描绘了当前页面的大致框架,加载完成后,最终骨架屏中各个占位部分 ...
- 005_HTML制作炫酷登录界面(CSS精灵图、背景图片局部显示)
效果: 说明: 输入框由三部分组成: 装局部图标的span 显示提示文字的span 接受用户输入的input 交互效果 刚打开页面,所有输入框显示提示文字 当input获得焦点,提示文字消失 当inp ...
- 骨架图的模拟js实现
骨架图的模拟js实现 场景 为了提升体验,我们这边在页面初始渲染时加入了骨架图来代替loading,在拿到数据后再渲染数据,更改组件的展示.感觉确实比loading要提升体验,开始没接触过,对这部 ...
- HTML怎么在字体下方加波浪线,CSS实现文字下面波浪线动画效果
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8607 本文可全文转载,个人网站无需授权,但需要保留原作者.出处以及文中链接,任 ...
- css 圆形背景icon_我写CSS的常用套路(附demo的效果实现与源码)
前言 本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗.1.交错动画 有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇.那么如 ...
- JS配合css实现slide文字框缩放伸展效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...
- html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果
Windows Phone的tile设计的美丽对我来说有余音绕梁的效果.我从来不知道优雅的方块盒子布局能给我深刻的印象.因此我尝试在web里用CSS和Jquery去实现这种tile设计.我已尝试Til ...
最新文章
- vector容器与find算法
- 史密斯圆图串并联口诀_看得懂的史密斯圆图(个人总结)
- redis部署与卸载
- stack示例_C.示例中的Stack.CopyTo()方法
- java上传文件-大文件以二进制保存到数据库
- python下载安装教程(官网)
- 用户手册 (V4.0 版)
- ARCGIS坐标和CAD坐标显示,以及坐标之间的转换
- 数据库系列(4):关系型数据库
- 早期/天使科技投资逻辑
- eclipse导入源文件后还是不能查看源代码的解决办法
- 上周热点回顾(7.4-7.10)
- VC遍历INI配置文件
- 功能测试的测试点全集
- BTree和B+Tree详解结构
- 广东移动 - 无线应用加速业务系统
- 计算机通信网络扫描版,2015计算机通信与网络作业.pdf
- Android官方文档翻译 十三 3.1Supporting Different Languages
- 一起学爬虫(Python) — 18 一生之敌查帕斯
- C语言——输出三角形面积和周长
热门文章
- 有效期5年,亳州市推进知识产权高质量发展扶持政策发布
- 学习编程的心得(一)
- 未来互联网+大数据时代,DT革命互联网大数据应用简析
- (附源码)springboot民宿网站 毕业设计 221901
- win7计算机开机启动项设置,如何设置WIN7开机启动项?
- https://pypi.tuna.tsinghua.edu.cn/packages/97/ae/0b08f53498417914f2274cc3b5576d2b83179b0cbb209457d0f
- 动态规划解决TSP(旅行推销员问题)
- 泰坦尼克号比赛大神级分析
- winform小程序-随机抽奖软件
- Windows清理C盘空间