iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

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

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

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

Day 11 - 漸變文字效果

文章同步更新在 CodeFictionist 今天又是水文的一天 (誤)。 我們大概從圖片的一些常用效果畢業了,從今天開始進到 CSS 的一些文字特效。 那...

2024-08-22 ‧ 由 agjeremy 分享
DAY 12

Day 12 - 文字陰影動畫

文章同步更新在 CodeFictionist 昨天是從文字本身的顏色著手,關於文字本身的顏色或背景後面還會有文章來介紹,今天稍微來聊聊文字的陰影效果。 文字...

2024-08-23 ‧ 由 agjeremy 分享
DAY 13

Day 13 - 文字遮罩效果

文章同步更新在 CodeFictionist 今天再回到文字的背景,我們在 Day 10 介紹過圖片的遮罩效果,今天來看看文字的遮罩效果。 在文字上做遮罩其...

2024-08-24 ‧ 由 agjeremy 分享
DAY 14

Day 14 - 打字機效果

文章同步更新在 CodeFictionist 今天這篇是促成我這次鐵人賽寫 30 天 CSS 的契機之一。 當初在 IG 上看到一些前端工程師分享的網站特效...

2024-08-25 ‧ 由 agjeremy 分享
DAY 15

Day 15 - 壓縮文字效果

文章同步更新在 CodeFictionist 今天這個特效是我週末滑 IG 看到 This.Web 在介紹文字跳約起來的特效,剛好我因為拿掉幾篇實作起來跟前...

2024-08-26 ‧ 由 agjeremy 分享
DAY 16

Day 16 - 彈跳文字效果

文章同步更新在 CodeFictionist 昨天講了文字壓縮的效果,今天我們來講文字彈跳的效果。 其實也沒什麼大不了的,昨天的 code 抄一抄,改一下...

2024-08-27 ‧ 由 agjeremy 分享
DAY 17

Day 17 - 彈跳文字效果最終回

文章同步更新在 CodeFictionist 哈哈哈,在拆開這個特效水了兩天文後,今天要來把壓下去和彈起來的效果合併在一起,讓文字在滑鼠滑過時有壓下去又跳起...

2024-08-28 ‧ 由 agjeremy 分享
DAY 18

Day 18 - 文字爆炸特效

文章同步更新在 CodeFictionist 今天早上我密了一個前端工程師群組,說:誒,我今天鐵人賽少了一個主題誒,有沒有人有好點子可以分享一下? 一個當初...

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

Day 19 - 跑馬燈文字

文章同步更新在 CodeFictionist 今天是文字特效的最後一篇,明天開始要來做互動累的特效了。 那文字特效的最後一篇,我們用個簡單的跑馬燈文字來當作...

2024-08-30 ‧ 由 agjeremy 分享
DAY 20

Day 20 - 懸停旋轉效果

文章同步更新在 CodeFictionist 這種 hover 時元素翻轉的效果其實通常是用在卡片上。 你已經有見過很多網站,通常是比較新一點的電商網站和一...

2024-08-31 ‧ 由 agjeremy 分享