一天一項 CSS 小技巧:打造視覺與互動效果
2024 iThome 鐵人賽系列文
所有文章
📄️ Day 01 - CSS 動畫基礎
在後面幾天來介紹那些有時會在其他網站常見的酷炫特效 (ex. 浮動粒子、按鈕彈跳效果...等) 之前,需要先花個幾天談一下 CSS 動畫的基礎,這樣才能更好適應後面部份的內容。
📄️ Day 02 - CSS 變形基礎
說到 CSS 的變形,大家都會聯想到 transform 這個屬性,這個屬性可以讓我們對元素進行旋轉、縮放、移動和傾斜等效果。
📄️ Day 03 - 複合動畫
第一天我們講了構成 CSS 動畫的兩個要素:@keyframes 與 animation。第二天我們探討了如何使用 transform 對元素做變形。
📄️ Day 04 - animation vs transition
今天的主題是稍微來解個惑。什麼疑惑呢?
📄️ Day 05 - 3D 變形
今天玩點進階的,第二天我們探討了如何使用 transform 對元素做變形,你會發現其中有些方法是針對 Z 軸的變形,這就是用來做 3D 變形的關鍵。
📄️ Day 06 - 多重背景
好了,我們總算脫離前面幾篇的動畫基礎,開始來點實務上常用的主題。但是呢,今天的主題不會用到 animation 跟 transform
📄️ Day 07 - 模糊與濾鏡效果
今天的主題我們聚焦在模糊與濾鏡效果上,在這裡我們會用上 filter 與 backdrop-filter 這兩個屬性。
📄️ Day 08 - 圖片懸停縮放效果
相信你有實在逛一些網站時,尤其那種電商平台,你可能會注意到有一些網站的設計是當你滑鼠懸停在圖片上時圖片會有一個放大的效果,讓你可以明確知道你正在關注哪項商品,而且也增加了一些互動性。
📄️ Day 09 - 漸變背景動畫
什麼是漸變背景動畫?
📄️ Day 10 - 圖片遮罩效果
在我們開始之前,我們先來看這兩張圖:
📄️ Day 11 - 漸變文字效果
今天又是水文的一天 (誤)。
📄️ Day 12 - 文字陰影動畫
昨天是從文字本身的顏色著手,關於文字本身的顏色或背景後面還會有文章來介紹,今天稍微來聊聊文字的陰影效果。
📄️ Day 13 - 文字遮罩效果
今天再回到文字的背景,我們在 Day 10 介紹過圖片的遮罩效果,今天來看看文字的遮罩效果。
📄️ Day 14 - 打字機效果
今天這篇是促成我這次鐵人賽寫 30 天 CSS 的契機之一。
📄️ Day 15 - 壓縮文字效果
今天這個特效是我週末滑 IG 看到 This.Web 在介紹文字跳躍起來的特效,剛好我因為拿掉幾篇實作起來跟前面幾天很相似的主題正苦無替代,所以決定也練練如何讓文字「跳」起來。
📄️ Day 16 - 彈跳文字效果
昨天講了文字壓縮的效果,今天我們來講文字彈跳的效果。
📄️ Day 17 - 彈跳文字效果最終回
哈哈哈,在拆開這個特效水了兩天文後,今天要來把壓下去和彈起來的效果合併在一起,讓文字在滑鼠滑過時有壓下去又跳起來的感覺。
📄️ Day 18 - 文字爆炸特效
今天早上我密了一個前端工程師群組,說:誒,我今天鐵人賽少了一個主題誒,有沒有人有好點子可以分享一下?
📄️ Day 19 - 跑馬燈文字
今天是文字特效的最後一篇,明天開始要來做互動累的特效了。
📄️ Day 20 - 懸停旋轉效果
這種 hover 時元素翻轉的效果其實通常是用在卡片上。
📄️ Day 21 - 平滑滾動效果
平滑滾動效果,乍聽之下應該會有所疑惑:平滑滾動?難道我平常 scroll 的時侯那個滾拉條的動作不平滑嗎?
📄️ Day 22 - 粒子浮動效果
這個特效也是促成我寫這 30 天系列的原因之一。
📄️ Day 23 - 波浪效果
今天這篇我其實也是來當學生的 XD
📄️ Day 24 - 按鈕彈跳效果
今天這個效果我覺得可以說是這 24 天來最常在實務上看到的一個效果,常見到 Tailwind CSS 都為它特別設計了一個 class。啊對,這就是按鈕的彈跳效果。
📄️ Day 25 - 元素懸停浮空效果
今天這個主題又是划水的一個主題 www
📄️ Day 26 - 元素區塊捲動效果
先來解釋一下這個效果到底是什麼。
📄️ Day 27 - 浮雕效果
我們 Day 22 講過怎麼用 box-shadow 創造粒子浮動效果,那時有稍稍提過一嘴用 box-shadow 做浮雕效果,今天就是要來實際做一下這個效果。
📄️ Day 28 - 元素拖拉移動
嚴格來講,這個效果其實不干 CSS 的事,它其實是靠 HTML5 的 draggable 屬性和 JavaScript 來實現的。
📄️ Day 29 - 輪播 (Carousel)
今天想了一天,今天雖然是第 29 天,但明天預計是寫個 30 天心得為這次鐵人賽收個尾,所以嚴格來講今天是寫技術文章的最後一天。
📄️ Day 30 - 鐵人 30 感想
一眨眼就 30 天了,鐵人賽就這樣完成了,在寫這篇鐵人 30 感想時猶感到一絲不真實。