[CSS揭秘]伪随机背景

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

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

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

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

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

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

运用场景:

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

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

时间: 2024-12-24 12:05:39

[CSS揭秘]伪随机背景的相关文章

[CSS揭秘]灵活的背景定位

技巧:可以随意的摆放背景图片的位置 背景知识:在CSS2.1时代,我们只能通过background-position设置图片相对于容器左上角的偏移量,这样当容器的尺寸不固定时,只能近视使用百分比实现.那么在CSS3时代,我们有了更好的解决方案. CSS3时代,background-position属性得到了扩展,允许我们指定背景图片距离任意角的偏移量,只需要在偏移量前面指定方位关键字即可. 对于每一个被设定的背景图片来说,background-position指定背景图片的初始位置.这个初始位置

css揭秘--笔记(未完)

第0章 关于本书 1, 本书要用到一个工具函数————$$(),它可以让我们更容易获取和遍历所有匹配特定css选择符的dom元素: 1 function $$(selector,context){ 2 context=context||document; 3 var elements=context.querySelectorAll(selector); 4 return Array.prototype.slice.call(elements); 5 } 2, 以下实现一个效果: 1 linea

CSS揭秘

第1章 引言 第2章 背景与边框 第3章 形状 第4章 视觉效果 第5章 字体排印 第6章 用户体验 第7章 结构与布局 第8章 过渡与动画 第1章 引言 Web标准:是敌还是友 CSS编码技巧 第2章 背景与边框 1 半透明边框 2 多重边框 3 灵活的背景定位 4 边框内圆角 5 条纹背景 6 复杂的背景图案 7 伪随机背景 8 连续的图像边框 第3章 形状 9 自适应的椭圆 10 平行四边形 11 菱形图片 12 切角效果 13 梯形标签页 14 简单的饼图 第4章 视觉效果 15 单侧投

[css 揭秘] :CSS揭秘 技巧(五):条纹背景

条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get.首先我们做一个渐变的背景 横条背景 现在我们把这两个色标拉近一点 这样好像条纹背景 就出来了哦!不过这是横向的,是不是还可以竖线呢!肯定是可以的啦,看看多变的条纹背景 竖条背景 斜向背景 这样的条纹背景还是不够灵活的.还有更好的方案 liear-gradient() 和 radial-gradien

[css 揭秘]:CSS揭秘 技巧(二):多重边框

我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来调整边框样式 方案一:box-shadow 目前为止,我们大多数人可能已经用过(或者滥用过)box-shadow来生成投影,不太为人之的是,它还接受四个参数(扩张半径),通过制定正值或负值,可以让投影面积加大或者减小, 用它的好处是它支持逗号分隔语法,我们可以创建任意数量的投影 知识背景:box-s

关于css中伪类及伪元素的总结

css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有“段落的第一行”.“文章首字母”之类的选择器,而这在一些出版场景里又是必须的,这一情况下出现的.引用标准中的话: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on infor

[CSS]利用伪元素实现一些特殊图形 from baidu校招

最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> -----------------------以上为背景------------------------------ 正方形当然很好做,但是右侧突出来的小角标就得自己想办法了.所以,既然没有到有,自然是用上了CSS中的伪元素. 这个形状跟我们平时经常遇到的小气泡和下拉栏差不多 平常实现我们常是通过添加小的icon来实

HTML和CSS设置动态导航以及CSS中伪元素的简单说明

HTML页面代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <script type=&qu

css实现微信信息背景qq聊天气泡

用css实现一个椭圆形状的背景框很好实现 css: div{ width:200px; height:80px; background-color: #78DDF8; border-radius:10px; } html: <div></div> 重点在于边上的小三角,这里用到css的伪类 :before  (:after/:first-letter/:first-line都是) div::before{ content:''; display:'block'; border:20