蟬原則下CSS3怎么實(shí)現(xiàn)隨機(jī)多背景隨機(jī)圓角等效果

本文小編為大家詳細(xì)介紹“蟬原則下CSS3怎么實(shí)現(xiàn)隨機(jī)多背景隨機(jī)圓角等效果”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“蟬原則下CSS3怎么實(shí)現(xiàn)隨機(jī)多背景隨機(jī)圓角等效果”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

目前創(chuàng)新互聯(lián)已為超過千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、興安盟網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

一、什么是“蟬原則”？

“蟬原則”，英文稱作“cicada principle”，是一種讓事物的重復(fù)出現(xiàn)符合“自然隨機(jī)性”的規(guī)則，為什么這么說呢？

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

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

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

還有一個很重要的原因，就是一片區(qū)域的蟬他不止一個種群，而使用質(zhì)數(shù)作為生命周期年數(shù)就可以避免鉆出泥土?xí)r可以和別種群的蟬類一起鉆出，這樣競爭壓力就會小。例如，北美的十七年蟬和十三年蟬每221年才會出現(xiàn)同時爆發(fā)的情況。

這種以質(zhì)數(shù)作為循環(huán)周期來增加“自然隨機(jī)性”的策略就稱之為“蟬原則”。

那“蟬原則”對我們網(wǎng)頁設(shè)計(jì)有什么啟示呢？那就是可以以最小成本實(shí)現(xiàn)更自然的隨機(jī)效果。

二、“蟬原則”下的CSS3 multiple Backgrounds隨機(jī)多背景

在著名的CSS3背景底紋站點(diǎn)有這么一個案例，如下截圖：

從名稱就可以看出其背后的原理，Cicada stripes是“蟬條紋”的意思，意思是說這里的隨機(jī)背景線條實(shí)際上是使用“蟬原則”實(shí)現(xiàn)的。代碼如下：

.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個漸變背景圖，然后每個背景圖的顏色透明度以及區(qū)域范圍都不一樣，然后最終的隨機(jī)效果，最關(guān)鍵的就是控制4個背景圖循環(huán)尺寸的background-size屬性，其對應(yīng)的4個尺寸值13px, 29px, 37px, 53px全部都是質(zhì)數(shù)，于是保證了最大的自然隨機(jī)，最終的隨機(jī)線條效果更自然。

三、“蟬原則”下的CSS3 border-radius隨機(jī)圓角效果

這里隨機(jī)圓角效果可以參見這個站點(diǎn)：http://2016.uxlondon.com/speakers，效果截圖如下：

可以看到嘉賓的頭像的圓角的大小都是隨機(jī)的，不規(guī)則的，有的這里扁，又是那里歪，其實(shí)現(xiàn)也利用的“蟬原則”。

按照以往的經(jīng)驗(yàn)，上面的是效果地址是很容易失效的，為了以防萬一，我這里也整了個代碼更干凈的演示demo，您可以狠狠地點(diǎn)擊這里：“蟬原則”下的隨機(jī)圓角效果demo

效果如下截圖：

其實(shí)現(xiàn)的原理是對:nth-child進(jìn)行自然隨機(jī)，按照原作者的話說，其原本是想類似下面實(shí)現(xiàn)：

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

但是發(fā)現(xiàn)不能覆蓋所有的列表項(xiàng)，反而有些不自然，因此，進(jìn)行了如下的改進(jìn)：

.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) {}

也就是后面再加一個小一號的質(zhì)數(shù)值，于是，再配合默認(rèn)效果，天衣無縫的隨機(jī)列表交互就實(shí)現(xiàn)了，拿2n+1項(xiàng)舉例：

.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);
}

...

讀到這里，這篇“蟬原則下CSS3怎么實(shí)現(xiàn)隨機(jī)多背景隨機(jī)圓角等效果”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：蟬原則下CSS3怎么實(shí)現(xiàn)隨機(jī)多背景隨機(jī)圓角等效果
文章源于：http://muchs.cn/article34/pppsse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、服務(wù)器托管、ChatGPT、關(guān)鍵詞優(yōu)化、Google、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)