现代 CSS

counter-reset

使用CSS的counter-increment做的游戏

我把CSS的黑魔法和把CSS推动到极限当作我的至爱。许多人没有意识到这是有多么的强大(特别是结合Sass)的预处理技术。这篇文章结合这两种至爱来做一些有意思的东西。当然它可能会或可能不会被你的下一个客户问,这样做有价值吗?但这样尝试才能真正的理解一种语言(当然,很多人说CSS不是一种语言)。但你也能使用纯CSS技术做一些简单的小游戏。

CSS Counters

CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ulol元素。如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image来实现。在CSS2.1的规范中介绍了一种新技术,允许开发人员使用伪类:after:before或者伪元素::after::before给任何元素创建自动递增计数器——类似于列表中的项目符号(list-style-type)。更神奇的是,可以给这些计数器设置独特样式,让其在外观上更靓丽。

返回顶部