今天，我们来讲一个很有趣的概念——蝉原则
我第一次听到蝉原则时，以为是这个“禅原则”，这个禅原则关注点更多的是关于设计、艺术方面，其受禅宗哲学启发，强调简洁、直觉与内在和谐，常见的有以下几个规则：简约，自然，静谧，含蓄，朴素，深度。当然也可用于软件开发方面，一段代码，清晰、简洁、结构清楚，无冗余，也可体现“禅”的原则。
但是，今天的重点不在这里（感兴趣的可以自行了解哈😂），今天要讲的是蝉原则。也该进入正题了，这个蝉原则究竟是什么呢？让我为你娓娓道来。
“蝉”？
没错，这个蝉就是指动物的那个蝉，尤指北美的一种周期蝉，这种蝉生命周期为十三年或十七年，因此能够让人明显感觉到每隔十几年蝉的数量就会大规模爆发一下。
这种策略对于这种周期蝉来说，有什么好处呢？
一是可以避免与天敌的周期重复（北美大部分吃蝉的鸟类一般寿命都不超过13年），二是可以避免和其他种类的蝉竞争（十三年蝉和十七年蝉每 13x17=221年才会同时破土而出）。
于是，便可引申出其简单的定义以质数作为循环周期来增加“自然随机性”的策略就为“蝉原则”
和css有什么关系？
蝉原则，在 css 中其实是一种设计模式，用于实现伪随机性的效果，因为 css 不提供随机函数，因此，我们只能使用某种伪随机的方式去实现一种类似随机的效果，同时，由于页面最后都是要展示到用户的屏幕上，而用户的屏幕是不会无穷大的，因此，只要参与的质数足够多，那么用户就很难发现规律。
来举一个例子,下面是ai帮我生成的一个符合蝉原则的代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>title</title>
<style>
body {
margin: 0;
height: 100vh;
background: radial-gradient(circle at center, #0f0f0f, #000);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.circle {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(0, 255, 128, 0.05);
animation: pulse 3s infinite ease-in-out;
}
/* 利用质数做出不同层次动画延迟和大小，实现蝉原则节奏 */
.circle:nth-child(2n) { width: 210px; height: 210px; animation-delay: 2s; }
.circle:nth-child(3n) { width: 230px; height: 230px; animation-delay: 3s; }
.circle:nth-child(5n) { width: 250px; height: 250px; animation-delay: 5s; }
.circle:nth-child(7n) { width: 280px; height: 280px; animation-delay: 7s; }
.circle:nth-child(11n) { width: 310px; height: 310px; animation-delay: 11s; }
@keyframes pulse {
0% {
transform: scale(0.8);
opacity: 0.1;
}
50% {
transform: scale(1.2);
opacity: 0.3;
}
100% {
transform: scale(0.8);
opacity: 0.1;
}
}
.charging-text {
position: relative;
color: #00ff99;
font-size: 24px;
font-weight: bold;
font-family: sans-serif;
z-index: 1;
}
</style>
</head>
<body>
<div class="charging-text">Charging...</div>
<script>
const count = 20;
for (let i = 0; i < count; i++) {
const c = document.createElement('div');
c.className = 'circle';
document.body.appendChild(c);
}
</script>
</body>
</html>
效果如下：
本质上就是利用质数做出不同层次动画延迟和大小，来实现蝉原则。
下面这个随机圆角头像也运用了蝉原则，感兴趣的同学可以考虑下要怎么实现。😎
总结
蝉原则在css中不仅仅可以实现上面提到的两个效果，当遇到其他需要实现随机性动画或者样式效果时，也要第一时间想到蝉原则这个概念。
好的，感谢大家阅读，看到这，不妨点个赞在走吧😍
