iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
影片教學

CSS 實作小品30天 系列

在這次的鐵人賽中,我將會用錄下 coding 過程的方式實作30個只用 HTML&CSS 就可以做出的小作品,敬請期待吧!

鐵人鍊成 | 共 31 篇文章 | 46 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1-CSS 手刻咖啡杯

第一天用 CSS 刻咖啡杯。 Demo link

2020-09-01 ‧ 由 harry xie 分享
DAY 2

Day2-CSS 實作按鈕 hover 效果

第二天我們來為按鈕 hover 時添加一些效果吧!! Demo link

2020-09-02 ‧ 由 harry xie 分享
DAY 3

Day3-CSS hover 時可以翻轉的卡片

用鳴人 vs 佐助當卡片背景哈哈哈 Demo

2020-09-03 ‧ 由 harry xie 分享
DAY 4

Day4-CSS Loading 動畫(第一集)

今天一次用 Sass 實作兩個 loading 動畫 Demo link

2020-09-04 ‧ 由 harry xie 分享
DAY 6

Day6-CSS 文字陰影效果

為看起來直立的文字添加了陰影。 Demo link

2020-09-06 ‧ 由 harry xie 分享
DAY 7

Day7-CSS Loading 動畫(第二集)

今天再次實作兩個網頁在 loading 時的過渡動畫。 Demo link

2020-09-07 ‧ 由 harry xie 分享
DAY 8

Day8-CSS 刻三勾玉寫輪眼

如題,其實不難刻,勾玉還可以用逗號解決。 Demo link 2020/9/20 更新: 在鐵人賽第 20 天,我還刻了萬花筒和和永恆萬花筒寫輪眼,有興趣歡迎點...

2020-09-08 ‧ 由 harry xie 分享
DAY 9

Day9-CSS 實作霓虹文字效果

利用 CSS text-shadow 屬性製作霓虹效果。 Demo link

2020-09-09 ‧ 由 harry xie 分享
DAY 10

Day10-CSS 製作鋸齒狀的邊框(border)

如題,我是從 stackoverflow 的討論知道可以使用 linear-gradient 屬性製作鋸齒狀邊框。 Demo link

2020-09-10 ‧ 由 harry xie 分享