前面说的条纹都是规则条纹。如果你实现随机宽度的垂直条纹，原则是a)尽量选择一个素数作为宽度，因为素数是与任何其他数字相对的素数b)因为最上面的patch的重复模式最多很容易注意到（它没有被任何东西遮挡），我们应该在顶部背景上安排具有最大瓦片间距的补丁：hsl(20,40%,90%);background-image:linear-gradient(90deg,#fb311px，透明0），线性渐变（90deg，#ab423px，透明0），线性渐变（90deg，#65541px，透明0）；background-size:41px100%,61px100%,83px100%;这里的112341都是质数，所以根据原理，也就是说112341=207583。超过207583后，背景会再重复一遍，但是谁的屏幕会比这个数字大，所以实现的效果是一个样子随机背景条纹如下：具体效果见链接。这个原理也可以用来制作随机效果loading@keyframesspin{to{transform:rotate(1turn);}}@keyframesradius{50%{border-radius:50%;}}@keyframes颜色{33%{颜色：橙色；}66%{color:deeppink}}@keyframeswidth{50%{border-width:.3em;}}加载ng:before{内容:'';显示：块；宽度：4em；高度：4em；保证金：0自动1em；边框：1.5em实心；颜色：黄绿色；框大小：边框框；/*主要关键点这里的1,7,1.1,1.3都是素数，所以看不出这个动画效果的图案*/animation:1sspin,.7sradius,1.1scolor,1.3swidth;动画计时函数：线性；动画迭代计数：无限；}.loading{保证金：自动；}正文{保证金：0;显示：弹性；最小高度：100vh；文本对齐：居中；背景：#655；">Loading...
具体效果见链接总结：此方法不仅适用于背景，也适用于其他涉及到有规律重复的情况。