蝉鸣原理,用 CSS 变量重温

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

Lea Verou 挖掘 CSS 技巧经典 并将其应用于剪裁一些代码块的背景

主要思想很简单:您使用 CSS 变量编写主要规则,然后使用 :nth-of-*() 规则将这些变量设置为每 N 个项目不同的值。 如果您使用足够的变量,并选择它们的 N 为素数,您就可以使用相对较小的 N 实现近似随机的外观。

该技巧的更新是,她没有更新每个选择器的整个代码块,而只是通过自定义属性更新了剪裁路径的一部分。

Lea 的文章还有更多技巧 使用相同的概念。

直接链接 →