国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

“蟬原則”與CSS3隨機多背景隨機圓角等效果

crossoverJie / 2237人閱讀

摘要：那蟬原則對我們網頁設計有什么啟示呢那就是可以以最小成本實現更自然的隨機效果。本文就演示兩個借助蟬原則和特性實現隨機效果的例子。

一、什么是“蟬原則”？ “蟬原則”，英文稱作“cicada principle”，是一種讓事物的重復出現符合“自然隨機性”的規則，為什么這么說呢？ “蟬原則”源自于北美，中國似乎并未有這樣的說法，這背后是有有故事的： 北美和東亞蟬的種群是不一樣的，在東亞蟬的幼蟲生活在土中3年5年或7年；但是北美有一種周期蟬（Magicicada），其生命周期為十三年或十七年，也被稱為十七年蟬或十三年蟬。東亞的蟬生命周期短，因此，給人感覺好像每年都有很多蟬，而北美的周期蟬的生命周期很長，因此能夠讓人明顯感覺到每隔十幾年蟬的數量就會大規模爆發一下，于是就會引發一些科學家的好奇，為什么生命周期是十三年或者十七年呢？ 蟬的天敵鳥類其繁榮蕭條周期是具有規律性的（一般2至6年），然后不斷重復。十三年或者十七年中的13和17都是質數，而吃蟬的鳥類一般壽命都不超過13年，因此就不會遇到上一世代所遇到的天敵。東亞蟬的幼蟲生活的年限比較短，可能與東亞的主要鳥類種群壽命不長有關，例如麻雀就2年壽命。 還有一個很重要的原因，就是一片區域的蟬他不止一個種群，而使用質數作為生命周期年數就可以避免鉆出泥土時可以和別種群的蟬類一起鉆出，這樣競爭壓力就會小。例如，北美的十七年蟬和十三年蟬每221年才會出現同時爆發的情況。 這種以質數作為循環周期來增加“自然隨機性”的策略就稱之為“蟬原則”。 那“蟬原則”對我們網頁設計有什么啟示呢？那就是可以以最小成本實現更自然的隨機效果。 本文就演示兩個借助“蟬原則”和CSS3特性實現隨機效果的例子。 二、“蟬原則”下的CSS3 multiple Backgrounds隨機多背景 在著名的CSS3背景底紋站點有這么一個案例，如下截圖： 從名稱就可以看出其背后的原理，Cicada stripes是“蟬條紋”的意思，意思是說這里的隨機背景線條實際上是使用“蟬原則”實現的。代碼如下： 
1 .stripes {
2   background-color: #026873;
3   background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
4     linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
5     linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
6     linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
7   background-size: 13px, 29px, 37px, 53px;
8 }
上面CSS代碼顯示總共有4個漸變背景圖，然后每個背景圖的顏色透明度以及區域范圍都不一樣，然后最終的隨機效果，最關鍵的就是控制4個背景圖循環尺寸的background-size屬性，其對應的4個尺寸值13px,?29px,?37px,?53px全部都是質數，于是保證了最大的自然隨機，最終的隨機線條效果更自然。 三、“蟬原則”下的CSS3 border-radius隨機圓角效果 這里隨機圓角效果可以參見這個站點：http://2016.uxlondon.com/speakers，效果截圖如下： 可以看到嘉賓的頭像的圓角的大小都是隨機的，不規則的，有的這里扁，又是那里歪，其實現也利用的“蟬原則”。 按照以往的經驗，上面的是效果地址是很容易失效的，為了以防萬一，我這里也整了個代碼更干凈的演示demo，您可以狠狠地點擊這里：“蟬原則”下的隨機圓角效果demo 效果如下截圖： 其實現的原理是對:nth-child進行自然隨機，按照原作者的話說，其原本是想類似下面實現： 
1 .list:nth-child(2n) {}
2 .list:nth-child(3n) {}
3 .list:nth-child(5n) {}
4 .list:nth-child(7n) {}
5 .list:nth-child(11n) {}
但是發現不能覆蓋所有的列表項，反而有些不自然，因此，進行了如下的改進： 
1 .list:nth-child(2n + 1) {}
2 .list:nth-child(3n + 2) {}
3 .list:nth-child(5n + 3) {}
4 .list:nth-child(7n + 4) {}
5 .list:nth-child(11n + 5) {}
也就是后面再加一個小一號的質數值，于是，再配合默認效果，天衣無縫的隨機列表交互就實現了，拿2n+1項舉例： 
 1 .list {
 2   border-radius: 87% 91% 98% 100%;
 3 }
 4 .list:hover {
 5   border-radius: 95% 70% 100% 80%;
 6   transform: rotate(-2deg);
 7 }
 8 
 9 .list:nth-child(2n+1) {
10   border-radius: 59% 52% 56% 59%;
11   transform: rotate(-6deg);
12 }
13 .list:nth-child(2n+1):hover {
14   border-radius: 51% 67% 56% 64%;
15   transform: rotate(-4deg);
16 }
于是效果達成！ 本例原文章介紹地址為：Magic randomisation with nth-child and Cicada Principle 四、“蟬原則”其他衍生以及結語 在web設計或交互實現的時候，隨機效果是非常常見的，比如說我們希望我們動畫看上去運行的是更隨機，則可以把動畫分解為多個維度，例如水平移動，垂直移動以及旋轉縮放等，然后不停的循環，然后很關鍵的一點就是每個維度動畫循環的時間必須是質數，這樣最后實現動畫效果就顯得非常隨機以及豐富等。 本文幾個案例主要目的就是拋磚引玉，順便順便科普一點生物學知識。突然發現自己的生物專業原來對現在做前端還是有幫助的呀，啊哈哈！ 用一句總結本文的內容就是，想要模擬自然的隨機效果，請使用質數作為循環單元。 好了，就這些，感謝閱讀，歡迎交流！ ? 全部代碼如下 CSS代碼： 
 1 .list {
 2   margin: 10px;
 3   display: inline-block;
 4   width: 168px; height: 168px;
 5   border: 4px solid #00C7E9;
 6   border-radius: 87% 91% 98% 100%;
 7   -webkit-transition: all .35s;
 8   transition: all .35s;
 9   overflow: hidden;
10 }
11 
12 .list:hover {
13   border-radius: 95% 70% 100% 80%;
14   transform: rotate(-2deg);
15 }
16 
17 .list:nth-child(2n+1) {
18   border-radius: 59% 52% 56% 59%;
19   transform: rotate(-6deg);
20 }
21 
22 .list:nth-child(2n+1):hover {
23   border-radius: 51% 67% 56% 64%;
24   transform: rotate(-4deg);
25 }
26 
27 .list:nth-child(3n+2) {
28   border-radius: 84% 94% 83% 72%;
29   transform: rotate(5deg);
30 }
31 
32 .list:nth-child(3n+2):hover {
33   border-radius: 69% 64% 53% 70%;
34   transform: rotate(0deg);
35 }
36 
37 .list:nth-child(5n+3) {
38   border-radius: 73% 100% 82% 100%;
39   transform: rotate(7deg);
40 }
41 
42 .list:nth-child(5n+3):hover {
43   border-radius: 73%;
44   transform: rotate(7deg);
45 }
46 
47 .list:nth-child(7n+5) {
48   border-radius: 93% 90% 85% 78%;
49   transform: rotate(-2deg);
50 }
51 
52 .list:nth-child(7n+5):hover {
53   border-radius: 53% 70% 85% 68%;
54   transform: rotate(-2deg);
55 }
56 
57 .list:nth-child(11n+7) {
58   border-radius: 68% 68% 83% 53%;
59   transform: rotate(-2deg);
60 }
61 
62 .list:nth-child(11n+7):hover {
63   border-radius: 58% 98% 78% 83%;
64   transform: rotate(3deg);
65 }
HTML代碼： 
<div class="constr">
    <div class="list"><img src="mm1.jpg">div>
    <div class="list"><img src="mm2.jpg">div>
    <div class="list"><img src="mm3.jpg">div>
    <div class="list"><img src="mm4.jpg">div>
    <div class="list"><img src="mm3.jpg">div>
    <div class="list"><img src="mm4.jpg">div>
    <div class="list"><img src="mm2.jpg">div>
    <div class="list"><img src="mm1.jpg">div>
    <div class="list"><img src="mm4.jpg">div>
    <div class="list"><img src="mm2.jpg">div>
    <div class="list"><img src="mm1.jpg">div>
    <div class="list"><img src="mm3.jpg">div>
div>

?

原文地址：http://www.zhangxinxu.com/wordpress/?p=5963

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2273.html

相關文章

  • css邊框與背景

    摘要：半透明邊框默認情況下，背景會延伸到邊框所在的區域下層。連續的圖像邊框思路就是在圖片之上，再疊加一層純白的實色背景。為了讓下層的圖片背景透過邊框區域顯示出來，需要給兩層背景指定不同的值。 1.半透明邊框 默認情況下，背景會延伸到邊框所在的區域下層。可以通過background-clip 屬性來調整。這個屬性的初始值是border-box，意味著背景會被元素的border-box（邊框的外...

    qpal 評論0 收藏0

  • css-secrets (css揭秘) 知識點目錄，值得深入學習！

    摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細的解答提醒自己要回顧。 1. 第一章 css編碼技巧 第二章 邊框與背景 半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

    DevWiki 評論0 收藏0

  • CSS背景與邊框

    摘要：背景與邊框半透明邊框背景知識顏色在里我們可以使用和兩種色彩模式，二者均可以用來在設置顏色的同時指定其它透明度。解決方案需要知道的是，在默認情況下，背景會延伸到邊框所在區域的下層。 title: 背景與邊框 date: 2016-10-16 tags: CSS Secrets 0x00 半透明邊框 背景知識 RGBA/HSLA 顏色 在CSS3里我們可以使用RGBA和...

    wanghui 評論0 收藏0

  • css 背景和漸變

    css 背景和漸變 background 背景 所有背景屬性都不能繼承 在CSS2.1里，background屬性的簡寫方式包含五種屬性值 – background-color, background-image, background-repeat, background-attachment, and background-position CSS3開始，又增加了3個新的屬性值注意：反斜杠可以...

    k00baa 評論0 收藏0

  • PIE(解決IE9以下圓角等兼容性問題)

    摘要：一能使支持的一些屬性，例如圓角，陰影等。具體的使用可詳見使支持圓角盒陰影與漸變渲染三的使用在網頁中加入腳本。注意，用專用的注釋，防止非瀏覽器下載。以下代碼在及以上瀏覽器可正常顯示。 一、PIE PIE能使IE6-9支持CSS3的一些屬性，例如圓角，陰影等。它分為pie.htc和pie.js兩種用法。 二、pie.htc的使用 在css片段里面加上behavior，例如 .logo{fo...

    whlong 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<