CSS 实现随机

使用 “禅原则”

.stripes {

background-color: #026873;

background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),

linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),

linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),

linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);

background-size: 13px, 29px, 37px, 53px;

}

这种以质数作为循环周期来增加“自然随机性”的策略就称之为“蝉原则”。

.list:nth-child(2n + 1) {}

.list:nth-child(3n + 2) {}

.list:nth-child(5n + 3) {}

.list:nth-child(7n + 4) {}

.list:nth-child(11n + 5) {}

...

后面再加一个小一号的数值，用来覆盖所有的列表项

多次以质数循环 覆盖 css，造成随机假象

https://codepen.io/alvaromontoro/pen/BaaBYyz

重叠 icon，循环调整 z-index，会导致随机点到其中任意一个 icon