当前位置:首页 > 新闻关注 > 网页设计 > 【CSS】骨架屏 Skeleton 效果

【CSS】骨架屏 Skeleton 效果

发布时间:2021-08-26关注:155编辑:内蒙古航佳网络科技有限公司标签: 网页设计   网站建设  

作者:CodingStartup起码课

https://juejin.cn/post/6915763034069663752

现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而用户体验:

这个效果中文叫作骨架屏,英文叫 Skeleton,今期会跟大家分享在 CSS 上实现这个效果的方法。


HTML 的部分

打开 CodePen 编辑器,在 HTML 的部份加入一些结构,例如是一张卡片。新增一个 <div> 标签,cl 名为 card;这张卡会有一张图片,加入一个 <div>,cl 名为 image,在里面加入一张图片。然后就是标题和内文,新增一个 <div>,cl 名为 content。在里面新增一个 <h4> 标签用来显示标题,而另一个 <div>,cl 名为 description,就用来显示内文。


CSS 的部分

去到 CSS 的部份,先处理好这张卡的样式。加入 body 选择器,设定背景颜色是浅灰色,字体是 Helvetica,文字大小是 15px,然后用 Flexbox 的方式将内容上下左右居中。


加入 .card 选择器,设定宽度是 320px,背景颜色设定为白色,这样背景的浅灰色就能够衬托出这个白色。加一点圆角,设定为 6px,由于在里面会加入图片,为了让图片都可以套用上圆角,设定 overflow 为 hidden,再加入阴影,很轻微就可以了。


然后设定图片容器的样式,加入 .image 选择器,设定为 200px。然后里面的图片,加入 .image img 选择器,设定 display 为 block,宽度是 。就继承自父容器,设定为 inherit,为了保持图片的比例,将 object-fit 设定为 cover。


再来内容的部份,加入 .content 选择器,设定 padding 为上下 2rem,左右 1.8rem;加入 h4 选择器,设定标题的样式,margin 设定为上左右都是 0,下是 1rem;文字大小和行距都设定为 1.5rem。


就是内文,加入 .description 选择器,文字大小设定为 1rem,行距设定为 1.4rem,现在这张卡的样式就完成了。


制作骨架屏

回到 HTML 的部份,复制多一张卡片,不过清空里面的图片和文字,以及加入一个名为 loading 的 cl,我们会将骨架屏的效果套用到这张卡片上。


去到 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,维持是 。这样就可以通过 background-position 控制背景的位移,从而扫光的效果。现在当 background-position-x 设定为 ,光的部份会在左边,而设定为 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 这个 cl;而在数据载入完成后,将数据显示到位置,并且将 loading 这个 cl 移除,在这里就展开介绍了。以上,就是今期要介绍的内容。

内蒙古网络公司航佳网络网站建设为您提供网站运营、网站制作、网站优化、网站优化推广知识,有何疑问就赶紧咨询我们,销售电话:0471-4599590  18698468112

相关新闻

销售电话:0471-4599590   18698468112
客 服QQ:303799553
微      信:gaowei1318
地      址:呼和浩特市金川开发区宽城小区#A6-4
网      址:www.nm9988.com

内蒙古网络公司航佳网络专业服务 呼和浩特网站建设呼和浩特网络推广呼和浩特网页设计呼和浩特建网站呼和浩特做网站,做网站还是选择 呼和浩特网络公司呼市网络公司航佳网络。

关于我们  |  联系我们  |  网站地图  |  广告禁词检查
版权所有:内蒙古航佳网络科技有限公司  Copyright  www.nm9988.com  备案许可证号:蒙ICP备14002651号       蒙公网安备 15012102000128号