[CSS揭秘]伪随机背景

大自然中的事物都不是以无限平铺的方式存在的，如果想让事物营造一种自然随机性，那么就需要使用一种伪随机的技巧。

当你注意到一个有辨识度的特征在以固定的规律循环重复时，那么它视图营造的自然随机性就会立刻崩塌。

如何产生一种真实的随机条纹呢，这就需要先了解什么叫做最大公倍数以及质数。

如果有多层图案，并且每一层图案都在按照自身的数学规律在重复时，那么最终重叠产生的图案就会以这些图案的数学规律的最小公倍数来进行重复。

为了让最小公倍数最大化，那么这些数字最好是“相对质数”或者都是质数。

这个技巧是一个叫Alex Walker提出的，命名为"蝉原则"。

运用场景:

1. 在图片库中，为每一幅图片进行细微的伪随机旋转效果，可以通过质数来选取指定的子元素使其旋转某个质数相应的角度。

2. 为某个元素定义动画时，可以定义多个时长为不同质数的动画。

转载于:https://www.cnblogs.com/joyjoe/p/6200974.html

[CSS揭秘]伪随机背景相关推荐

css揭秘实战技巧- 背景与边框 [一]
前言这段时间,一直觉得css这块感觉每次写代码都是常用的那些基本属性,觉得始终没有对css有一个更深层次的掌握,所以,最近开始学习css相关进阶知识,首先第一关就是攻克 "css揭秘&qu ...
css背景随机,CSS秘密花园：随机背景
<CSS Secrets>是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密.是一本CSSer值得一读的一本书,经过一段时间的阅读,我.@南北和@彦子一起将在W3cplu ...
CSS揭秘之《背景图案》
网格 html {background: #58a;background-image: linear-gradient(white 2px, transparent 0),linear-gradien ...
《CSS揭秘》-总结47个Css技巧（一）：常用的背景与边框技巧
注:本文案例来源于<CSS揭秘>这本书. 1. 设置半透明边框无效? 使用 background-clip padding-box 解决. background white backgro ...
css揭秘第二章：背景与边框，自己的学习笔记，如有错误请多指正
1 半透明边框 width: 200px;height: 200px;background: white;border: 10px solid hsla(0, 0%, 100%, 0.5);backg ...
css揭秘笔记——背景与边框
背景与边框半透明边框知识点 background-clip: [border-box] |[padding-box] | [content-box];hsla(<色相>, <饱和 ...
css揭秘实战技巧 - 形状 [二]
全目录本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css ...
css随机背景,随机背景
问题虽然平铺几何图形很棒,但看起来还是有点乏味.而在自然界中,万事万物皆有不同.即使是在相似中,也充满了变化和随机因素.你可以看一看花圃:虽然花朵具有一致的艳丽,但也各有各的亮点.这个世界上没有任何 ...
CSS揭秘：6.复杂的背景图案（下）
文章目录前言一.网格Svg svg css 小结相关阅读前言上一篇文章中我们学会了如何使用实现棋盘背景的方法,但是显而易见的代码量是比较多的.那么怎么可以优化代码量,降低维护成本呢? 一.网 ...

[CSS揭秘]伪随机背景

[CSS揭秘]伪随机背景相关推荐

最新文章

热门文章