Day 0 - 2024 iThome 鐵人賽規劃
在實務開發中,我們常常想為網站增添一些酷炫的特效,例如浮動粒子、浮雕效果等,來提升網站的互動性與趣味性。
然而,當我們使用的 UI 框架本身未支援這些特效時,往往需要自己手刻實現。雖然通常只要 Google 一下,就能很快找到相關的技術文章或教學影片,但似乎缺乏一個將這些常用特效集中整理的地方。
藉著這次鐵人賽的機會,我希望能夠親自實現、整理和分享這些特效的實作方法,讓大家能夠一次性地掌握這些實用的 CSS 技巧。
一天一項 CSS 小技巧:打造視覺與互動效果
Day 01 - 05:動畫與變形基礎
- Day 01:CSS 動畫基礎
介紹@keyframes
及如何運用動畫來提升網站的動態效果。 - Day 02:CSS 變形基礎
介紹transform
的基本應用,包括旋轉、縮放、移動和傾斜等效果。 - Day 03:複合動畫
結合@keyframes
與transform
創造更複雜的動畫效果。 - Day 04:
animation
vstransition
探討animation
與transition
兩者之間的差異與適用情境。 - Day 05:3D 變形
使用transform
的 3D 效果來創造更立體的視覺效果。
Day 06 - 12:圖片與背景
- Day 06:多重背景
使用background
屬性為元素設定多個背景圖片或顏色。 - Day 07:模糊與濾鏡效果
運用filter
和backdrop-filter
來為圖片背景增加模糊或其它濾鏡效果。 - Day 08:圖片懸停縮放效果
當滑鼠懸停時,圖片會進行縮放的視覺效果。 - Day 09:漸變背景動畫
透過background
及@keyframes
創造背景的漸變動畫效果。 - Day 10:圖片遮罩效果
使用mask
創造圖片的遮罩效果。
Day 11 - 19:文字特效
- Day 11:漸變文字效果
使用background-clip
和linear-gradient
為文字添加漸變效果。 - Day 12:文字陰影動畫
結合text-shadow
和@keyframes
為文字創造陰影的動畫效果。 - Day 13:文字遮罩效果
利用background
和background-clip
來創造文字的簍空效果。 - Day 14:打字機效果
模擬打字機輸入文字的效果,讓文字一個字一個字地出現。 - Day 15:壓縮文字效果
讓文字在滑鼠滑過時有壓下去的感覺。 - Day 16:彈跳文字效果
讓文字在滑鼠滑過時有跳起來的感覺。 - Day 17:彈跳文字最終回 壓下去又談起來的合併效果。
- Day 18:文字爆炸特效
結合一點 JavaScript 創造爆炸的四散文字效果。 - Day 19:跑馬燈文字
透過@keyframes
創造文字跑馬燈的動畫效果。
Day 20 - 26:互動特效
- Day 20:懸停旋轉效果
當滑鼠懸停時,元素會進行旋轉的互動效果。 - Day 21:平滑滾動效果
使用scroll-behavior
來創造滾動時的平滑過渡效果。 - Day 22:粒子浮動效果
透過@keyframes
和animation
實現粒子漂浮在頁面上的效果。 - Day 23:波浪效果
創造類似水波的效果,讓元素有波動的視覺效果。 - Day 24:按鈕彈跳效果
當滑鼠點擊時,按鈕會產生彈跳的動畫效果。 - Day 25:元素懸停浮空效果
當滑鼠懸停在元素上時,元素會浮空的視覺效果。 - Day 26:元素區塊捲動效果
使用scroll-snap-type
來創造滑鼠輕輕滾動就自動到下一個區塊的效果。
Day 27 - 30:其他特效
- Day 27:浮雕效果
使用box-shadow
創造元素或文字的浮雕效果。 - Day 28:元素拖拉移動
使用draggable
屬性和 JavaScript 實現元素的拖拉移動效果。 - Day 29:輪播
使用 CSS 搭配 JavaScript 實現簡單的輪播效果。 - Day 30:30 天鐵人賽心得