在實務開發中,我們常常想為網站增添一些酷炫的特效,例如浮動粒子、浮雕效果等,來提升網站的互動性與趣味性。然而,當我們使用的 UI 框架本身未支援這些特效時,往往需要自己手刻實現。雖然通常只要 Google 一下,就能很快找到相關的技術文章或教學影片,但似乎缺乏一個將這些常用特效集中整理的地方。藉著這次鐵人賽的機會,我希望能夠親自實現、整理和分享這些特效的實作方法,讓大家能夠一次性地掌握這些實用的 CSS 技巧。
文章同步更新在 CodeFictionist 今天又是水文的一天 (誤)。 我們大概從圖片的一些常用效果畢業了,從今天開始進到 CSS 的一些文字特效。 那...
文章同步更新在 CodeFictionist 昨天是從文字本身的顏色著手,關於文字本身的顏色或背景後面還會有文章來介紹,今天稍微來聊聊文字的陰影效果。 文字...
文章同步更新在 CodeFictionist 今天再回到文字的背景,我們在 Day 10 介紹過圖片的遮罩效果,今天來看看文字的遮罩效果。 在文字上做遮罩其...
文章同步更新在 CodeFictionist 今天這篇是促成我這次鐵人賽寫 30 天 CSS 的契機之一。 當初在 IG 上看到一些前端工程師分享的網站特效...
文章同步更新在 CodeFictionist 今天這個特效是我週末滑 IG 看到 This.Web 在介紹文字跳約起來的特效,剛好我因為拿掉幾篇實作起來跟前...
文章同步更新在 CodeFictionist 昨天講了文字壓縮的效果,今天我們來講文字彈跳的效果。 其實也沒什麼大不了的,昨天的 code 抄一抄,改一下...
文章同步更新在 CodeFictionist 哈哈哈,在拆開這個特效水了兩天文後,今天要來把壓下去和彈起來的效果合併在一起,讓文字在滑鼠滑過時有壓下去又跳起...
文章同步更新在 CodeFictionist 今天早上我密了一個前端工程師群組,說:誒,我今天鐵人賽少了一個主題誒,有沒有人有好點子可以分享一下? 一個當初...
文章同步更新在 CodeFictionist 今天是文字特效的最後一篇,明天開始要來做互動累的特效了。 那文字特效的最後一篇,我們用個簡單的跑馬燈文字來當作...
文章同步更新在 CodeFictionist 這種 hover 時元素翻轉的效果其實通常是用在卡片上。 你已經有見過很多網站,通常是比較新一點的電商網站和一...