美文网首页
7、伪随机背景

7、伪随机背景

作者: Elevens_regret | 来源:发表于2017-04-02 23:36 被阅读0次

    实现条纹背景时,让条纹看上去是随机的,可以用质数来表示每个条纹的宽度。

    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%;
    

    这种使用质数来增加随机性,实现伪随机的效果叫做“蝉原则”。可以用于很多涉及规律性重复的地方。

    1. 为图片库中的每张图片都设定随机旋转的角度,使用:nth-child(n)选择符,让n为质数。
    2. 将多个动画效果叠加到同一元素上,将各个动画的时间设定为质数,就会使其看上去在无规则运动。

    相关文章

      网友评论

          本文标题:7、伪随机背景

          本文链接:https://www.haomeiwen.com/subject/amhnottx.html