摘要：希臘神話中有這樣一個(gè)故事是講述宙斯創(chuàng)造出來一個(gè)云女神涅斐勒，并且類似大多數(shù)的希臘神話一樣的，這個(gè)故事非常的奇異且限制級(jí)。我們能夠知道的是涅斐勒是由宙斯以他自己美麗的妻子的形象創(chuàng)造的。

希臘神話中有這樣一個(gè)故事是講述宙斯創(chuàng)造出來一個(gè)云女神涅斐勒，并且類似大多數(shù)的希臘神話一樣的，這個(gè)故事非常的奇異且限制級(jí)。下面一個(gè)簡短克制的版本。

我們能夠知道的是： 涅斐勒是由宙斯以他自己美麗的妻子的形象創(chuàng)造的。一個(gè)凡人遇見涅斐勒，陷入愛河，并且他們一起有了一個(gè)孩子，確切的說是一個(gè)半人半馬的嬰兒。

很怪誕對(duì)吧，值得慶幸的是，在瀏覽器中創(chuàng)建云的過程要簡單得多，而且風(fēng)險(xiǎn)要小得多。

(Demo)

最近，我發(fā)現(xiàn)開發(fā)者Yuan Chuan 已經(jīng)實(shí)現(xiàn)了用代碼生成逼真的云。對(duì)我來說，瀏覽器中的云這個(gè)概念一直如同希臘神話中的那邊神秘。

讓我們來看一下這個(gè)’畫筆‘吧 （點(diǎn)這里），可以見到的是作者通過使用 box-shadow 作為包含兩個(gè)濾鏡的  元素的補(bǔ)充實(shí)現(xiàn)了這個(gè)令人驚嘆的‘云圖’！

想要繪制出兼顧寫實(shí)和精致的云圖，需要搭配使用feTurbulence 和feDisplacementMap這兩個(gè)濾鏡。這兩個(gè)濾鏡不僅可以具有強(qiáng)大且復(fù)雜的功能，并且還可以提供一些令人興奮的特性（其中包含奧斯卡獲獎(jiǎng)算法)）！當(dāng)然，這些功能在瀏覽器‘引擎蓋’下有著令人生畏的復(fù)雜性。

雖然這些 SVG 濾鏡的物理特性超出了本文的范圍，但 MDN 和 w3.org 上提供了大量文檔供學(xué)習(xí)參考。另外還有 feTurbulence 和 feDisplacement 介紹。

對(duì)于本文，我們將專注于學(xué)習(xí)使用這些 SVG 濾鏡來實(shí)現(xiàn)令人驚奇的效果。濾鏡背后的實(shí)現(xiàn)算法并不在我們的研究范圍內(nèi)，就像藝術(shù)家雖然可以繪制出美麗的景觀但卻不用懂得油漆的分子結(jié)構(gòu)。

而我們需要做的只是密切關(guān)注一小部分 SVG 屬性，這些屬性使得我們可以在瀏覽器中繪制逼真的云圖。通過學(xué)習(xí)這些屬性可以讓我們?cè)陧?xiàng)目中按照自己的意愿更好的制作出特定的濾鏡效果。

一些必要的前置基礎(chǔ)知識(shí)

CSS 規(guī)則 box-shadow的五個(gè)值得關(guān)注的屬性：

box-shadow:

讓我們來增大這些值（可能會(huì)高于正常的開發(fā)者會(huì)做的），這樣在視圖的右下方就會(huì)有陰影出現(xiàn)。 !

#cloud-square {
        background: turquoise;
        box-shadow: 200px 200px 50px 0px #000;
        width: 180px;
        height: 180px;
    }
    
    #cloud-circle {
        background: coral;
        border-radius: 50%;
        box-shadow: 200px 200px 50px 0px #000;
        width: 180px;
        height: 180px;
    }

你肯定表演或者見過過皮影戲吧？
Double-M

類似于通過改變手的形狀來改變陰影的方式，我們的 HTML 中的“源形狀”可以通過移動(dòng)或者變形來同步影響其在瀏覽器中呈現(xiàn)的陰影的形狀。box-shadow 復(fù)制原始圖形的圓角效果。SVG 濾鏡對(duì)于元素都以及元素的shadow 的都會(huì)生效。

到目前為止，上面的 SVG 標(biāo)簽不會(huì)被渲染出來的，因?yàn)槲覀儧]有定義任何視覺樣式（更不用說零寬度、高度）。它的唯一目的是保持我們喂養(yǎng)的過濾器 SourceGraphic（也就是我們的

）。我們的源

和它的陰影都被濾波器獨(dú)立地扭曲。

我們通過 ID 選擇器(#cloud-circle) 將下面的 CSS 規(guī)則添加到目標(biāo)元素上：

#cloud-circle {
        filter: url(#filter);
        box-shadow: 200px 200px 50px 0px #fff;
    }

看這里！

好吧，添加上 SVG 濾鏡依舊沒能給我們帶來什么驚喜。

(Demo)

別擔(dān)心！這才僅僅只是開始，更有趣的還在后面。

測試 feDisplacementMap scale 屬性

使用這一屬性進(jìn)行的一些實(shí)驗(yàn)可以產(chǎn)生顯著的效果。暫時(shí)，讓我們保持它的 feTurbulence 不變，只調(diào)整 DisplacementMap 的 scale 屬性。

隨著 scale 的增加（每次增加 30 ），我們的源

開始扭曲變形且它的投下陰影更接近天空中云隨機(jī)的形狀。

The    scale attribute incremented by values of 30. (Demo)

好的，通過改變 scale ,好像終于接近了正確云形狀的的數(shù)值范圍！讓我們稍微改變下顏色，以便看起來更像一朵 云彩 ??。

body {
        background: linear-gradient(165deg, #527785 0%, #7fb4c7 100%);
    }
    
    #cloud-circle {
        width: 180px;
        height: 180px;
        background: #000;
        border-radius: 50%;
        filter: url(#filter);
        box-shadow: 200px 200px 50px 0px #fff;
    }

現(xiàn)在我們的圖形越來越接近真實(shí)的云效果了！

調(diào)整 box-shadow 的值

下面的一組圖像顯示了 blur 對(duì) box-shadow 效果的影響。下面的圖形中 blur 的數(shù)組依次遞增。

The    cloud becomes "softer" as the blur value increases.

為了使我們的云帶有一些積云效果，可以稍微擴(kuò)大

的尺寸。

#cloud-circle {
        width: 500px;
        height: 275px;
        background: #000;
        border-radius: 50%;
        filter: url(#filter);
        box-shadow: 200px 200px 60px 0px #fff;
    }

好的，但是現(xiàn)在的源div 元素正在成為障礙。