純CSS的水滴(黏膠)狀態的動畫教學，這種CSS動畫英文是Gooey Effect(黏膠效果)，當DOM_(註釋1)在進行動畫運作時，會有類似黏膠黏在一起的感覺。

Gooey Effect範例

先看如下範例，當中間的圓球再兩邊移動時，球與球的交界點會類似出現膠狀、水狀的感覺。

---

CSS Gooey Effect 黏膠、水滴重點

CSS Gooey Effect效果形成原因，主要是靠CSS的filter濾鏡所達成。會使用到filter濾鏡的blur(模糊)以及contrast(對比)。

---

步驟一

我們使用上方已經完成的範例，來做CSS Gooey Effect的教學與解說。

首先我們先寫上動畫會使用的DOM，如下範例，我想製作成三個小圓球並排，我使用ul包住三個li，由li來做成小球。

---

步驟二：加上裝飾CSS

我們為li畫成小圓球的樣子，並用flex方式，將li並排在ul內，如下範例(因為這篇主要是要說明Gooey Effect效果，所以非Gooey Effect會應用到的重要CSS，會直接帶過去喔，如果你看不懂以下的CSS，表示CSS基礎還不穩固，建議先去W3C學習一下CSS)。

---

步驟三：將第一個小圓球做動畫效果。

我們讓第一個圓球做成動畫，讓第一顆圓球在左右兩邊來回移動，CSS增加與範例如下圖。

---

步驟四：形成CSS Gooey Effect效果

最後就要為CSS小圓球動畫添加Gooey Effect黏球、水滴的效果了。在小圓球li的父層ul加上filter濾鏡的blur(模糊)，如下效果。

---

步驟五：在模糊情況下，增加對比

在第四步驟時，DOM的小圓球，已經被我們用模糊了，在來就是要產生膠狀，強烈的對比來消除羽化邊緣。

因此我們要在ul繼續加入filter濾鏡的contrast(對比)，來消除模糊的羽化邊緣。一樣請在li的父層ul加上contrast，因為前步驟已經有為ul加上filter屬性了，因此只需要在filter: blur(10px) 後方加上contrast(20)屬性，即可。

完成以上步驟，會發現，還是沒有Gooey Effect效果對吧!?

---

步驟六：完成Gooey Effect的CSS

因為li的父層ul，雖然已經被我們加上必要的CSS filter: blur(10px) contrast(20)了，但是因為ul 沒有背景顏色，因此無法順利的運算對比(contrast)的樣子，所以只要為 ul 再加入背景 background 顏色就可以囉，如下範例。

---

Gooey Effect 思考

完成以上步驟後，其實就可以了解Gooey Effect是怎麼產生的了，先將DOM元素模糊(blur)化，並且加入強烈對比(contrast)，讓模糊的羽化邊緣看不見，因此就可以產生有趣的膠狀、水的效果囉。

註釋1:DOM的全名為Document Object Model,意思就是HTML內的各種標籤，例如:div、a、p、b…等，統稱為DOM(Document Object Model)。