文章关键字 ‘counter’

我使用CSS模拟个假的数字loading效果

2023年06月18日,星期日

loading示意图

有没有办法使用CSS让数字从0-100像动画一样不停变化呢?如果你一时不知道该如何实现,则本文值得一看。

阅读全文…

关于list-style-type项目符号你应该知道的事情

2022年11月5日,星期六

CSS list-style-type绿豆子

有些看起来简简单单的CSS属性,深究起来,其背后的知识量却是惊人的大!比方说list-style-type属性。

阅读全文…

纯CSS实现未读消息超过100自动显示为99+

2022年01月14日,星期五

未读消息99+

未读消息超过100显示为99+是常见的交互,目前主流实现一定是通过 JS 逻辑判断,其实纯 CSS 就能实现一模一样的功能,兼容性还不赖,进来看看吧。

阅读全文…

CSS var变量的局部作用域(继承)特性

2019年01月26日,星期六

CSS变量缩略图

最近做项目,发现CSS变量一个有意思的特性,那就是变量作用域非全局,于是,我们可以放心大胆使用CSS变量给伪元素传参了。这样,以前一些很啰嗦的实现现在就可以变得非常简洁。

阅读全文…

CSS之before, after伪元素特性表现两则

2015年04月19日,星期日

伪元素之所以称之为“伪元素”一定是有其原因的,本文就举两个特征例子,展示下伪元素跟普通元素,到底有哪些不一样的地方。

依然,有Demo、有截图,有源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS counter计数器(content目录序号自动递增)详解

2014年08月26日,星期二

CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到,不过当时是作为其中一员介绍。就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员。很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象。

然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相。今天,就大肆笔墨,好好地全面地介绍了下CSS计数器,确实有很多知识点,确实有很多不太好理解的地方,确实有很多会踩坑的地方,果然深不可测。不过,本文有着详实的文字,丰富的截图,完全的demo,必要的源代码展示。相信本文的内容会对你的学习有所帮助的!

阅读全文…