純CSS三角組合字體動畫與polygon動畫實作

css polygon

自從 有了動畫之後,世界都變得複雜美好了起來,我們可以利用 而不需 javascript 來達到簡易的動畫效果外,也能用 來搭配 javascript 來輕鬆處理一些較為複雜的網頁動畫效果,在 CSS 可樂部落格的概念中,手刻純 CSS 是 Amos 一向的習慣與觀念,所以這次 Amos 把之前放在腦袋裡的概念抽空寫了出來,驗證腦袋瓜內的東西有沒有問題這樣。

近期 Amos 因為專案忙碌,少有時間來寫寫部落格,但是整天寫專案實在太悶了,於是利用一些零碎的時間把之前腦袋內的概念動畫寫出來,雖然動畫在專案上的實用度可能不高,但也算是一個概念的驗證了,在這次的CSS三角組合字體動畫中,採用了CSS polygon的方式來做繪圖,其實原本是想用 CSS 三角形繪製技巧的,但繪製那麼多不同大小的三角形實在有點累人外,也無法達到漸層色的效果,所以最後還是決定使用polygon來處理了。

CSS 屬於屬性值的一種,搭配使用的屬性是 clip-path 屬性,其本身就跟 SVG 的繪製一樣,不過在 CSS 屬性值的撰寫方式上有一些些的差異,SVG的原始碼是將一組值之間使用逗號做區隔,兩組值之間採用空白字元做區隔,但在 CSS 的撰寫中,原始碼是將一組值之間使用空白做區隔,而兩組值之間使用逗號做區隔,各位看得有點混亂是不是?我們來看以下比較圖大概就知道了

SVG寫法: 100,200 250,150
CSS寫法: 100 200,250 150

而CSS3 polygon寫法簡單來說其實就是個座標系統罷了,兩個數值標示的就是物件內的點座標,瀏覽器會自動識別點跟點之間圍起來的區域,於是就能畫出我們所要的圖形了,複雜一點的話則還會有其他特殊圖形,像是貝茲曲線或是圓形…等等造型,但那些就不在這篇文章的討論中了。

此外在這個例子中也使用到了 :nth-child 這個選取器來製造假的亂數效果,這樣就能讓漸層色看起來有多種角度,讓畫面更佳的豐富有層次感,而背景則使用到了放射性漸層來鋪個底。

最後獻上實際的成品網頁給各位,請點選「純CSS三角組合字體動畫與polygon動畫實作」且需使用 Chrome 瀏覽器觀看,若想到我的codepen去修改測試看看請至 「Prue CSS3 Typograph Animation (only chrome) 」中查看喔。

如果看不到的朋友,可以直接看下方錄製好的影片了解效果喔,謝謝

若各位有些什麼想法也歡迎提出給Amos一起討論喔,謝謝^^