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，造成随机假象
重叠 icon，循环调整 z-index，会导致随机点到其中任意一个 icon