iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

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

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

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

Day 01 - CSS 動畫基礎

文章同步更新在 CodeFictionist 在後面幾天來介紹那些有時會在其他網站常見的酷炫特效 (ex. 浮動粒子、按鈕彈跳效果...等) 之前,需要先花...

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

Day 02 - CSS 變形基礎

文章同步更新在 Codefictionist 說到 CSS 的變形,大家都會聯想到 transform 這個屬性,這個屬性可以讓我們對元素進行旋轉、縮放、移...

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

Day 03 - 複合動畫

文章同步更新在 CodeFictionist 第一天我們講了構成 CSS 動畫的兩個要素:@keyframes 與 animation。第二天我們探討了如何...

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

Day 04 - animation vs transition

文章同步更新在 CodeFictionist 今天的主題是稍微來解個惑。什麼疑惑呢? 在前面的文章中,說過: @keyframes 與 animation...

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

Day 05 - 3D 變形

文章同步更新在 CodeFictionist 今天玩點進階的,第二天我們探討了如何使用 transform 對元素做變形,你會發現其中有些方法是針對 Z 軸...

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

Day 06 - 多重背景

文章同步更新在 CodeFictionist 好了,我們總算脫離前面幾篇的動畫基礎,開始來點實務上常用的主題。但是呢,今天的主題不會用到 animation...

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

Day 07 - 模糊與濾鏡效果

文章同步更新在 CodeFictionist 今天的主題我們聚焦在模糊與濾鏡效果上,在這裡我們會用上 filter 與 backdrop-filter 這兩...

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

Day 08 - 圖片懸停縮放效果

文章同步更新在 CodeFictionist 相信你有實在逛一些網站時,尤其那種電商平台,你可能會注意到有一些網站的設計是當你滑鼠懸停在圖片上時圖片會有一個...

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

Day 09 - 漸變背景動畫

文章同步更新在 CodeFictionist 什麼是漸變背景動畫? 我們乾脆直接先來看 CodePen 的範例效果 (想知道效果的麻煩一定要去看 CodeP...

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

Day 10 - 圖片遮罩效果

文章同步更新在 CodeFictionist 在我們開始之前,我們先來看這兩張圖: Well,也許你會說,這有啥特別的,不就一個個人部落格的 logo...

2024-08-21 ‧ 由 agjeremy 分享