iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

一天一項 CSS 小技巧:打造視覺與互動效果 系列

在實務開發中,我們常常想為網站增添一些酷炫的特效,例如浮動粒子、浮雕效果等,來提升網站的互動性與趣味性。然而,當我們使用的 UI 框架本身未支援這些特效時,往往需要自己手刻實現。雖然通常只要 Google 一下,就能很快找到相關的技術文章或教學影片,但似乎缺乏一個將這些常用特效集中整理的地方。藉著這次鐵人賽的機會,我希望能夠親自實現、整理和分享這些特效的實作方法,讓大家能夠一次性地掌握這些實用的 CSS 技巧。

鐵人鍊成 | 共 30 篇文章 | 6 人訂閱 訂閱系列文 RSS系列文 團隊iT 貓貓教
DAY 21

Day 21 - 平滑滾動效果

文章同步更新在 CodeFictionist 平滑滾動效果,乍聽之下應該會有所疑惑:平滑滾動?難道我平常 scroll 的時侯那個滾拉條的動作不平滑嗎? 嗯...

2024-09-01 ‧ 由 agjeremy 分享
DAY 22

Day 22 - 粒子浮動效果

文章同步更新在 CodeFictionist 這個特效也是促成我寫這 30 天系列的原因之一。 那時為了建我朋友工作室的網站,想說要在首頁添增一些會飄動的粒...

2024-09-02 ‧ 由 agjeremy 分享
DAY 23

Day 23 - 波浪效果

文章同步更新在 CodeFictionist 今天這篇我其實也是來當學生的 XD 今天這個波浪效果,過去我在一位前端前輩的作品集上看過,那時就很想試試,但一...

2024-09-03 ‧ 由 agjeremy 分享
DAY 24

Day 24 - 按鈕彈跳效果

文章同步更新在 CodeFictionist 今天這個效果我覺得可以說是這 24 天來最常在實務上看到的一個效果,常見到 Tailwind CSS 都為它特...

2024-09-04 ‧ 由 agjeremy 分享
DAY 25

Day 25 - 元素懸停浮空效果

文章同步更新在 CodeFictionist 今天這個主題又是划水的一個主題 www 我們之前曾經在 Day 8 介紹過圖片懸停縮放效果,今天這個其實也是有...

2024-09-05 ‧ 由 agjeremy 分享
DAY 26

Day 26 - 元素區塊捲動效果

文章同步更新在 CodeFictionist 先來解釋一下這個效果到底是什麼。 我們在 Day 21 介紹的平滑滾動效果是指當使用者點擊頁面上的錨點連結時,...

2024-09-06 ‧ 由 agjeremy 分享
DAY 27

Day 27 - 浮雕效果

文章同步更新在 CodeFictionist 我們 Day 22 講過怎麼用 box-shadow 創造粒子浮動效果,那時有稍稍提過一嘴用 box-shad...

2024-09-07 ‧ 由 agjeremy 分享
DAY 28

Day 28 - 元素拖拉移動

文章同步更新在 CodeFictionist 嚴格來講,這個效果其實不干 CSS 的事,它其實是靠 HTML5 的 draggable 屬性和 JavaSc...

2024-09-08 ‧ 由 agjeremy 分享
DAY 29

Day 29 - 輪播 (Carousel)

文章同步更新在 CodeFictionist 今天想了一天,今天雖然是第 29 天,但明天預計是寫個 30 天心得為這次鐵人賽收個尾,所以嚴格來講今天是寫技...

2024-09-09 ‧ 由 agjeremy 分享
DAY 30

Day 30 - 鐵人 30 感想

文章同步更新在 CodeFictionist 一眨眼就 30 天了,鐵人賽就這樣完成了,在寫這篇鐵人 30 感想時猶感到一絲不真實。 其實打從我剛踏進軟體開...

2024-09-10 ‧ 由 agjeremy 分享