這是我參加 2020 年 iT 邦幫忙鐵人賽 CSS 實作小品30天 系列作品的總整理。這篇文章中我把每天的 demo 都整理起來做成 gif 圖片，歡迎有興趣更了解何製作該作品的朋友可以點擊程式碼或是影片觀看。
Day30&29-CSS 日夜切換
Demo link
Youtube影片(Par1)
Youtube影片(Part2)
Day28-CSS 手刻緞帶
Day27-CSS 黏黏球效果
Day26-CSS 刻前端三大框架 Vue & React & Angular Logo
Day25-CSS 文字攀爬階梯效果
Day24-CSS 故障文字效果
Day23-CSS 毛玻璃效果
Day22-CSS Loading 動畫(第三集)
Day21-CSS 抖動的文字
Day20-CSS 刻永恆萬花筒寫輪眼-左眼天照，右眼加具土命，雙眼須佐能乎
Day19-CSS 利用視差滾動，讓螺旋手裏劍轉起來
Day18-CSS 輪播的文字
Day17-CSS 剪紙文字效果
Day16-CSS 卡片打開效果
Day15-CSS 條紋背景的按鈕
Day14-CSS 手刻鑽石
Day13-CSS 3D 翻轉的圖片
Day12-CSS 3D 書本
Day11-CSS 手刻燃燒的火焰
Day10-CSS 鋸齒狀的邊框
Day9-CSS 霓虹文字效果
Day8-CSS 三勾玉寫輪眼
Day7-CSS Loading 動畫(第二集)
Day6-CSS 文字陰影效果
Day5-CSS 按鈕波紋效果
Day4-CSS Loading 動畫(第一集)
Day3-CSS 翻轉的卡片
Day2-CSS 按鈕 hover 效果
Day1-CSS 手刻咖啡杯
以上就是30天的所有作品 demo，歡迎追蹤 codepen 或是 youtube 頻道，會不定期更新一些東西。對鐵人賽感興趣的話，每年9月~10月都會舉辦，我覺得是一個提升自己和分享知識的機會，未來不妨考慮參加看看吧~~
