CSS揭秘之《伪随机背景》

之前说的条纹全部都是有规律的条纹，如果实现随机宽度的垂直条纹呢
其实原理
a)宽度尽量选择质数，因为质数跟任何其它数字都是相对质数
b)因为最顶层贴片的重复规律最容易被察觉（它没有被任何东西遮挡），我们应该把平铺间距最大的贴片安排在最顶层

background: hsl(20, 40%, 90%);
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%;

这里的11 23 41都是质数，所以按照原理也就是说112341=207 583 超出207 583后这个背景会再重复一遍，可是谁的屏幕会比这个数字大呢，所以实现的效果就是一个看起来随机的背景条纹
如下所示：

具体效果见链接

同样利用这个原理可做一个随机效果的loading

@keyframes spin {
            to {
                transform: rotate(1turn);
            }
        }

        @keyframes radius {
            50% {
                border-radius: 50%;
            }
        }

        @keyframes color {
            33% {
                color: orange;
            }
            66% {
                color: deeppink
            }
        }

        @keyframes width {
            50% {
                border-width: .3em;
            }
        }

        .loading:before {
            content: '';
            display: block;
            width: 4em;
            height: 4em;
            margin: 0 auto 1em;
            border: 1.5em solid;
            color: yellowgreen;
            box-sizing: border-box;
            /* 主要关键点在这里  1 7 1.1 1.3都质数，所以这个动画效果你看不出规律 */
            animation: 1s spin, .7s radius, 1.1s color, 1.3s width;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        .loading {
            margin: auto;
        }

        body {
            margin: 0;
            display: flex;
            min-height: 100vh;
            text-align: center;
            background: #655;
            color: white;
        }

<p class="loading">Loading…</p>

具体效果见链接

总结：这个方法不仅适用于背景， 还可以用于其他涉及有规律重复的情况。