這篇是在廖雪峰的部落格學習的一個效果。

首先介紹的是，什麼是蟬原則？

（百度圖片）

“蟬原則”，英文稱作“cicada principle”，是一種讓事物的重複出現符合“自然隨機性”的規則，為什麼這麼說呢？

“蟬原則”源自於北美，中國似乎並未有這樣的說法，這背後是有有故事的：

北美和東亞蟬的種群是不一樣的，在東亞蟬的幼蟲生活在土中3年5年或7年；但是北美有一種週期蟬（Magicicada），其生命週期為十三年或十七年，也被稱為十七年蟬或十三年蟬。東亞的蟬生命週期短，因此，給人感覺好像每年都有很多蟬，而北美的週期蟬的生命週期很長，因此能夠讓人明顯感覺到每隔十幾年蟬的數量就會大規模爆發一下，於是就會引發一些科學家的好奇，為什麼生命週期是十三年或者十七年呢？

蟬的天敵鳥類其繁榮蕭條週期是具有規律性的（一般2至6年），然後不斷重複。十三年或者十七年中的13和17都是質數，而吃蟬的鳥類一般壽命都不超過13年，因此就不會遇到上一世代所遇到的天敵。東亞蟬的幼蟲生活的年限比較短，可能與東亞的主要鳥類種群壽命不長有關，例如麻雀就2年壽命。

還有一個很重要的原因，就是一片區域的蟬他不止一個種群，而使用質數作為生命週期年數就可以避免鑽出泥土時可以和別種群的蟬類一起鑽出，這樣競爭壓力就會小。例如，北美的十七年蟬和十三年蟬每221年才會出現同時爆發的情況。

這種以質數作為迴圈週期來增加“自然隨機性”的策略就稱之為“蟬原則”。

那“蟬原則”對我們網頁設計有什麼啟示呢？那就是可以以最小成本實現更自然的隨機效果。

本文就演示兩個藉助“蟬原則”和CSS3特性實現隨機效果的例子。

蟬原則”下的CSS3 multiple Backgrounds隨機多背景

從名稱就可以看出其背後的原理，Cicada stripes是“蟬條紋”的意思，意思是說這裡的隨機背景線條實際上是使用“蟬原則”實現的。

程式碼如下：

background-color: #026873;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255
 
,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;

上面CSS程式碼顯示總共有4個漸變背景圖，然後每個背景圖的顏色透明度以及區域範圍都不一樣，然後最終的隨機效果，最關鍵的就是控制4個背景圖迴圈尺寸的background-size屬性，其對應的4個尺寸值13px, 29px, 37px, 53px全部都是質數，於是保證了最大的自然隨機，最終的隨機線條效果更自然。

“蟬原則”下的CSS3 border-radius隨機圓角效果

可以看到嘉賓的頭像的圓角的大小都是隨機的，不規則的，有的這裡扁，又是那裡歪，其實現也利用的“蟬原則”。

按照以往的經驗，上面的是效果地址是很容易失效的（並沒有哦，可以看到效果的），為了以防萬一，這裡也整了個程式碼更乾淨的演示demo，您可以狠狠地點選這裡（寫了個小demo）：

下面，html程式碼：

<div class="constr">
    <div class="list"><img src="1.jpg"></div>
    <div class="list"><img src="2.jpg"></div>
    <div class="list"><img src="3.jpg"></div>
    <div class="list"><img src="4.jpg"></div>
    <br/>
    <div class="list"><img src="5.jpg"></div>
    <div class="list"><img src="6.jpg"></div>
    <div class="list"><img src="7.jpg"></div>
    <div class="list"><img src="8.jpg"></div>
    <br/>
    <div class="list"><img src="4.jpg"></div>
    <div class="list"><img src="8.jpg"></div>
    <div class="list"><img src="1.jpg"></div>
    <div class="list"><img src="3.jpg"></div>
  </div>

css

body {
      background: #000;
    }

    .list {
      margin: 10px;
      display: inline-block;
      width: 200px;
      height: 200px;
      border: 5px solid #f93030;
      border-radius: 87% 91% 98% 100%;
      -webkit-transition: all .35s;
      transition: all .35s;
      overflow: hidden;
    }

    .list:hover {
      border-radius: 95% 70% 100% 80%;
      transform: rotate(-2deg);
    }

    .list:nth-child(2n+1) {
      border-radius: 59% 52% 56% 59%;
      transform: rotate(-6deg);
    }

    .list:nth-child(2n+1):hover {
      border-radius: 51% 67% 56% 64%;
      transform: rotate(-4deg);
    }

    .list:nth-child(3n+2) {
      border-radius: 84% 94% 83% 72%;
      transform: rotate(5deg);
    }

    .list:nth-child(3n+2):hover {
      border-radius: 69% 64% 53% 70%;
      transform: rotate(0deg);
    }

    .list:nth-child(5n+3) {
      border-radius: 73% 100% 82% 100%;
      transform: rotate(7deg);
    }

    .list:nth-child(5n+3):hover {
      border-radius: 73%;
      transform: rotate(7deg);
    }

    .list:nth-child(7n+5) {
      border-radius: 93% 90% 85% 78%;
      transform: rotate(-2deg);
    }

    .list:nth-child(7n+5):hover {
      border-radius: 53% 70% 85% 68%;
      transform: rotate(-2deg);
    }

    .list:nth-child(11n+7) {
      border-radius: 68% 68% 83% 53%;
      transform: rotate(-2deg);
    }

    .list:nth-child(11n+7):hover {
      border-radius: 58% 98% 78% 83%;
      transform: rotate(3deg);
    }

效果圖：

上圖就是滑鼠滑上去的效果，嘛~我畢竟是要成為海賊王的男人 o(≧ω≦)o ~

其實現的原理是對:nth-child進行自然隨機，按照原作者的話說，其原本是想類似下面實現：

.list:nth-child(2n) {}
.list:nth-child(3n) {}
.list:nth-child(5n) {}
.list:nth-child(7n) {}
.list:nth-child(11n) {}

但是發現不能覆蓋所有的列表項，反而有些不自然，因此，進行了如下的改進：

.list:nth-child(2n + 1) {}
.list:nth-child(3n + 2) {}
.list:nth-child(5n + 3) {}
.list:nth-child(7n + 4) {}
.list:nth-child(11n + 5) {}

也就是後面再加一個小一號的質數值，於是，再配合預設效果，天衣無縫的隨機列表互動就實現了，拿2n+1項舉例：

.list {
  border-radius: 87% 91% 98% 100%;
}
.list:hover {
  border-radius: 95% 70% 100% 80%;
  transform: rotate(-2deg);
}

.list:nth-child(2n+1) {
  border-radius: 59% 52% 56% 59%;
  transform: rotate(-6deg);
}
.list:nth-child(2n+1):hover {
  border-radius: 51% 67% 56% 64%;
  transform: rotate(-4deg);
}

在web設計或互動實現的時候，隨機效果是非常常見的，比如說我們希望我們動畫看上去執行的是更隨機，則可以把動畫分解為多個維度，例如水平移動，垂直移動以及旋轉縮放等，然後不停的迴圈，然後很關鍵的一點就是每個維度動畫迴圈的時間必須是質數，這樣最後實現動畫效果就顯得非常隨機以及豐富等。

本文幾個案例主要目的就是拋磚引玉，順便順便科普一點生物學知識。

用一句總結本文的內容就是，想要模擬自然的隨機效果，請使用質數作為迴圈單元。