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

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

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

很怪誕對吧，值得慶幸的是，在瀏覽器中創建云的過程要簡單得多，而且風險要小得多。

(Demo)

最近，我發現開發者Yuan Chuan 已經實現了用代碼生成逼真的云。對我來說，瀏覽器中的云這個概念一直如同希臘神話中的那邊神秘。

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

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

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

對于本文，我們將專注于學習使用這些 SVG 濾鏡來實現令人驚奇的效果。濾鏡背后的實現算法并不在我們的研究范圍內，就像藝術家雖然可以繪制出美麗的景觀但卻不用懂得油漆的分子結構。

而我們需要做的只是密切關注一小部分 SVG 屬性，這些屬性使得我們可以在瀏覽器中繪制逼真的云圖。通過學習這些屬性可以讓我們在項目中按照自己的意愿更好的制作出特定的濾鏡效果。

一些必要的前置基礎知識

CSS 規則 box-shadow的五個值得關注的屬性：

box-shadow:

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

#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 中的“源形狀”可以通過移動或者變形來同步影響其在瀏覽器中呈現的陰影的形狀。box-shadow 復制原始圖形的圓角效果。SVG 濾鏡對于元素都以及元素的shadow 的都會生效。

到目前為止，上面的 SVG 標簽不會被渲染出來的，因為我們沒有定義任何視覺樣式（更不用說零寬度、高度）。它的唯一目的是保持我們喂養的過濾器 SourceGraphic（也就是我們的

）。我們的源

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

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

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

看這里！

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

(Demo)

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

測試 feDisplacementMap scale 屬性

使用這一屬性進行的一些實驗可以產生顯著的效果。暫時，讓我們保持它的 feTurbulence 不變，只調整 DisplacementMap 的 scale 屬性。

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

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

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

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

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

現在我們的圖形越來越接近真實的云效果了！

調整 box-shadow 的值

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

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

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

的尺寸。

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

好的，但是現在的源div 元素正在成為障礙。