iT邦幫忙

harry xie
iT邦研究生 1 級 ‧ 點數 3396
台達電子軟體工程師 國立中正大學資訊管理學系
38353
累計瀏覽數
站內簡訊 追蹤

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
影片教學

CSS 實作小品30天 系列

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

鐵人鍊成 ｜ 共 31 篇文章 ｜ 62 人訂閱 訂閱系列文 RSS系列文
3 Like 0 留言 1294 瀏覽
DAY 1

Day1-CSS 手刻咖啡杯

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

2020-09-01 ‧ 由 harry xie 分享
2 Like 0 留言 1829 瀏覽
DAY 2

Day2-CSS 實作按鈕 hover 效果

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

2020-09-02 ‧ 由 harry xie 分享
1 Like 0 留言 1153 瀏覽
DAY 3

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

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

2020-09-03 ‧ 由 harry xie 分享
2 Like 0 留言 1113 瀏覽
DAY 4

Day4-CSS Loading 動畫(第一集)

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

2020-09-04 ‧ 由 harry xie 分享
1 Like 0 留言 857 瀏覽
DAY 5

Day5-CSS 實作 hover 按鈕時產生的波紋效果

Demo link

2020-09-05 ‧ 由 harry xie 分享
2 Like 0 留言 905 瀏覽
DAY 6

Day6-CSS 文字陰影效果

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

2020-09-06 ‧ 由 harry xie 分享
1 Like 0 留言 1543 瀏覽
DAY 7

Day7-CSS Loading 動畫(第二集)

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

2020-09-07 ‧ 由 harry xie 分享
5 Like 0 留言 3038 瀏覽
DAY 8

Day8-CSS 刻三勾玉寫輪眼

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

2020-09-08 ‧ 由 harry xie 分享
1 Like 0 留言 894 瀏覽
DAY 9

Day9-CSS 實作霓虹文字效果

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

2020-09-09 ‧ 由 harry xie 分享
1 Like 1 留言 2238 瀏覽
DAY 10

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

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

2020-09-10 ‧ 由 harry xie 分享
harry xie的鐵人檔案
harry xie的收藏
harry xie的追蹤
harry xie的Like
harry xie的紀錄
harry xie的訂閱列表