純CSS 水滴(黏球、膠狀、Gooey Effect)動畫效果

  •  
  •  
  • 4
  •  
    4
    Shares

css-gooey-effect-水滴、黏膠狀教學

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

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!

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)。

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠連結登記或輸入專屬代碼「PIXNET111」

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
美國亞馬遜 Amazon 刴手勸敗
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折


  •  
  •  
  • 4
  •  
    4
    Shares

發表迴響

Up ↑