经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时,正常排列,当超过 9 张时,会提示还剩多少张,如下:
如何使用纯 CSS 实现这一效果呢?一起来看看吧
布局就很简单了,一个很普通的九宫格布局,这里使用 grid
这里正方形可以用aspect-ratio[1]简易实现,对应的 CSS 如下
效果如下
那么,如何实现在超过9张时自动提示剩余张数呢?接着往下看
提到序列,自然会想到 CSS 计数器[2],现在我们加上计数器
然后在每一个 .item显示数字,可以用到伪元素::after
这样可以得到如下效果
数字是显示出来了,不过现在还有两个问题:
1.数量超过9个时,不会隐藏超过的图片2.这个数字不是超出图片的数量,而是总数
这个其实非常容易,由于数量是固定的,只需要利用选择器nth-child配合~就能实现
这个地方是通过 visibility: hidden隐藏超过的图片,原因是该属性不会影响计数器的计算,如果使用display:none则会跳过计数
目前由于是从第1个开始计数,所以最后统计的是整个列表的数量,但是我们可以指定从第10个才开始计数,会得到什么效果呢?为了方便演示,暂时把隐藏打开
可以看到,从第10个开始计数后,最后一个数字就表示还剩余多少张
现在把最后一张放在右下角就行了(绝对定位),最后一张可以用.item:nth-child(9)~.item:last-child来选择,表示第9张后面的最后一张图片,实现如下
这样就实现了纯 CSS 自动提示剩余图片的效果,演示如下
这里的 add 和 remove 是演示动态修改节点数量,与交互逻辑无关
完整代码可访问 list-counter (codepen.io)[3]
在上一种实现方式中,我们是手动指定从第 10 个元素开始计数的
其实,还有一种方式也值得一试,那就是直接指定计数器的初始值,默认为0,现在改为 -9 就可以了,实现如下
不一样的初始化思路,剩下的就和之前一样的逻辑了,完整代码可访问 list-counter-reset (codepen.io)[4]
这个案例到这里就结束了,一个低成本的 CSS 小技巧,虽然不多,但是非常实用,尤其是选择器的运用,说不定将来哪次就会用上了。CSS 计数器可以说是非常灵活和强大了,仔细挖掘应该还能实现更多实用的效果,这里总结一下:
本文由知识库于2021-09-27发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/5626.html
上一篇不挂科APP集卡领腾讯视频会员月卡等
下一篇dnf端口辅助什么意思(dnf端口辅助免费权限)
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台