7、伪随机背景

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

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. 将多个动画效果叠加到同一元素上,将各个动画的时间设定为质数,就会使其看上去在无规则运动。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用纯 CSS 实现 500px 照片列表布局 文章很长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读...
    HZ充电大喵阅读 2,697评论 0 4
  • 背景 一年多以前我在知乎上答了有关LeetCode的问题, 分享了一些自己做题目的经验。 张土汪:刷leetcod...
    土汪阅读 12,790评论 0 33
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,679评论 0 7
  • 【今日晨读】 早起读书10分钟 工作生活更轻松 王通老师在《群体潜意识》中分享了: 一个意识就是一个波,多个意识相...
    李冠华阅读 398评论 0 1
  • 第一次去人民大会堂听音乐会,算是满足了对于人民大会堂小小的好奇。这次音乐会选的都是很欢乐、节奏很强的音乐,不属于纯...
    zhouhw阅读 1,001评论 0 0