“蝉原则”与CSS3随机多背景随机圆角等效果--技术头条 -- 微博大V帮你宣传技术博文开发者头条码农头条

“蝉原则”与CSS3随机多背景随机圆角等效果 (www.zhangxinxu.com)

【简介】

“蝉原则”，英文称作“cicada principle”，是一种让事物的重复出现符合“自然随机性”的规则，为什么这么说呢？

“蝉原则”源自于北美，中国似乎并未有这样的说法，这背后是有有故事的：

北美和东亚蝉的种群是不一样的，在东亚蝉的幼虫生活在土中3年5年或7年；但是北美有一种周期蝉（Magicicada），其生命周期为十三年或十七年，也被称为十七年蝉或十三年蝉。东亚的蝉生命周期短，因此，给人感觉好像每年都有很多蝉，而北美的周期蝉的生命周期很长，因此能够让人明显感觉到每隔十几年蝉的数量就会大规模爆发一下，于是就会引发一些科学家的好奇，为什么生命周期是十三年或者十七年呢？

蝉的天敌鸟类其繁荣萧条周期是具有规律性的（一般2至6年），然后不断重复。十三年或者十七年中的13和17都是质数，而吃蝉的鸟类一般寿命都不超过13年，因此就不会遇到上一世代所遇到的天敌。东亚蝉的幼虫生活的年限比较短，可能与东亚的主要鸟类种群寿命不长有关，例如麻雀就2年寿命。

还有一个很重要的原因，就是一片区域的蝉他不止一个种群，而使用质数作为生命周期年数就可以避免钻出泥土时可以和别种群的蝉类一起钻出，这样竞争压力就会小。例如，北美的十七年蝉和十三年蝉每221年才会出现同时爆发的情况。

这种以质数作为循环周期来增加“自然随机性”的策略就称之为“蝉原则”。

那“蝉原则”对我们网页设计有什么启示呢？那就是可以以最小成本实现更自然的随机效果。

本文就演示两个借助“蝉原则”和CSS3特性实现随机效果的例子。

点击查看原文 >>

由 @技术头条 2017-02-19 23:57 / 0个评论

赞过的人： @技术头条

时隔两年，Chrome也支持round等CSS数学函数了 (www.zhangxinxu.com)

本文介绍了CSS中的数学函数 `round()` 的新应用，它能实现多种取整方式，如上舍、下舍、四舍五入等，用于提升样式的精确控制。特别是在字体大小、动画步阶和响应式设计中，`round()` 可防止小数值带来的渲染偏差，使界面更一致。这一函数现已在Chrome中支持，为开发者提供了更灵活的布局工具。

by @技术头条 2024-11-02 16:22 查看详情

如何使用纯CSS鉴别是不是Safari浏览器 (www.zhangxinxu.com)

如何通过纯 CSS 来判断是否为 Safari 浏览器？本文介绍了多种实用技巧和 @supports 规则的使用，帮助开发者轻松检测并处理 Safari 特有的样式兼容性问题。无论是桌面还是 iOS Safari，本文都有详细的解决方案！

by @技术头条 2024-09-09 23:40 查看详情

如何用简单的Web方法实现图片的马赛克效果 (www.zhangxinxu.com)

文章介绍了如何通过简单的Web技术实现图片的马赛克效果。作者主要讨论了使用SVG滤镜来实现此效果，尤其是通过使用像<feFlood>、<feComposite>和<feMorphology>等SVG元素。此外，文章还探讨了通过CSS属性image-rendering: pixelated来模拟马赛克效果的方法，即通过放大小图片来达到效果。文中提供了详细的示例和代码片段来帮助实现这些效果。

by @技术头条 2024-08-06 07:48 查看详情

CSS fixed固定定位transofrm失效及居中小技巧 (www.zhangxinxu.com)

介绍个我认为最好的固定居中定位的CSS实现，以及展示transform内fixed固定定位失效的解决方法，你说不定哪天就会用到。

by @技术头条 2023-02-12 14:01 查看详情

Tips: 使用CSS逻辑属性简化我们的书写 (www.zhangxinxu.com)

原本以为CSS逻辑属性只能在对称布局这样少见的场景中才有用武之地，最近发现，CSS逻辑属性还有简写的作用，这可牛逼坏了~

by @技术头条 2022-12-24 23:31 查看详情

整洁架构之CSS (insights.thoughtworks.cn)

虽然开发工具早已经从 preprocessor 进化到了 styled component，但在我看来新的工具并没有让我们的样式代码写的更好，只是更快——也可能会让代码坏的更快。工具的繁荣并没有让那些导致代码难以维护的根本问题烟消云散，而是更易让我们对其视而不见。这篇文章旨在回答一个问题：为什么样式代码难以写对，它的陷阱究竟在哪里？

by @Thoughtworks 2022-09-08 17:45 查看详情

CSS background背景图标的变色技巧 (www.zhangxinxu.com)

最近遇到了需要使用CSS让background背景图标的变色的需求场景，使用背景混合模式实现的，可能大家以后也用得到，所以分享下。

by @技术头条 2022-08-18 23:37 查看详情

详解日后定会大规模使用的CSS @layer 规则 (www.zhangxinxu.com)

话就放在这里了，不出三年，CSS @layer 规则一定会在业界遍地开花，到处使用。

by @技术头条 2022-08-18 23:36 查看详情

CSS排版为何强？瞧瞧多牛这换行 (www.zhangxinxu.com)

在 CSS 这门语言中，凡是 Web 中的换行规则都可以改变，无论是中文的还是英文的，灵活到超出你的想象，非常强大！

在文字内容排版这块，CSS 是计算机领域中无可争议的霸主气，什么 SVG 什么 canvas 根本就是望尘莫及。

by @技术头条 2022-08-18 23:18 查看详情

介绍一种CSS变量未定义语法也OK的小妙招 (www.zhangxinxu.com)

我以为我对 CSS 变量了解够多够深入了，没想到还是有知识的盲区，今天这个小技巧小特性就是其中之一，并且是相当实用的一个特性。

by @技术头条 2022-07-24 20:54 查看详情