实现条纹背景时,让条纹看上去是随机的,可以用质数来表示每个条纹的宽度。
background: #bbab82;
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,61px 100%,83px 100%;
这种使用质数来增加随机性,实现伪随机的效果叫做“蝉原则”。可以用于很多涉及规律性重复的地方。
- 为图片库中的每张图片都设定随机旋转的角度,使用:nth-child(n)选择符,让n为质数。
- 将多个动画效果叠加到同一元素上,将各个动画的时间设定为质数,就会使其看上去在无规则运动。
网友评论