很快的鐵人賽30天就這樣結束了，在此感謝讀者觀看我的作品以及訂閱我的鐵人賽主題!!有你們的觀看是我創作的動力哈哈。

在做這個主題之前是覺得 codepen 上有很多酷炫的網頁效果，非常好奇那些厲害的效果是如何製作的，自己也想動手做做看並把製作過程記錄下來，就有了 CSS 實作小品30天這個主題，這邊比較不好意思的是影片因為設備關係沒有錄音講解只有背景音樂和針對較少的語法做文字註解XD，若不知道某 CSS 語法可以 google 一下，自己查的東西印象會更深。

而在這篇文章中我把每天的 demo 都整理起來做成 gif 圖片，歡迎有興趣更了解何製作該作品的邦友可以點擊程式碼或是影片觀看。

Day30&29-CSS 日夜切換

兩天都是製作同一個作品，但因為要做的東西較多因此分兩集製作。

Demo link

Part1

Part2

10/7 更新

這個小作品後來被 codepen 選中加入 trending，獲得了十幾個愛心~~感動啊

Day28-CSS 手刻緞帶

Demo link

Day27-CSS 黏黏球效果

原理參考: 黏黏球 ( 純 CSS )

Demo link

Day26-CSS 刻前端三大框架 Vue & React & Angular Logo

Demo link

Day25-CSS 文字攀爬階梯效果

Demo link

Day24-CSS 故障文字效果

Demo link

Day23-CSS 毛玻璃效果

Demo link

Day22-CSS Loading 動畫(第三集)

Demo link

Day21-CSS 抖動的文字

Demo link

Day20-CSS 刻永恆萬花筒寫輪眼-左眼天照，右眼加具土命，雙眼須佐能乎

Demo link

Day19-CSS 利用視差滾動，讓螺旋手裏劍轉起來

Demo link

Day18-CSS 輪播的文字

Demo link

Day17-CSS 剪紙文字效果

Demo link

Day16-CSS 卡片打開效果

Demo link

Day15-CSS 條紋背景的按鈕

Demo link

Day14-CSS 手刻鑽石

Demo link

Day13-CSS 3D 翻轉的圖片

Demo link

Day12-CSS 3D 書本

Demo link

Day11-CSS 手刻燃燒的火焰

Demo link

Day10-CSS 鋸齒狀的邊框

Demo link

Day9-CSS 霓虹文字效果

Demo link

Day8-CSS 三勾玉寫輪眼

這篇觀看數莫名高，不知道為什麼XD

Demo link

Day7-CSS Loading 動畫(第二集)

Demo link

Day6-CSS 文字陰影效果

Demo link

Day5-CSS 按鈕波紋效果

Demo link

Day4-CSS Loading 動畫(第一集)

Demo link

Day3-CSS 翻轉的卡片

Demo

Day2-CSS 按鈕 hover 效果

Demo link

Day1-CSS 手刻咖啡杯

Demo link