iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

不用庫 也能酷 - 玩轉 CSS & Js 特效 系列

在這個數位時代,網站的外觀和互動效果成為了吸引訪問者的關鍵。然而,過度依賴庫和框架可能讓網站失去獨特性和性能表現。這就是為什麼我們要一同踏上一場探索之旅,尋找不用依賴任何庫,卻能創造出令人驚艷的CSS和JavaScript特效的方法。

在這30天中,我們將揭開如何以最精簡的代碼,實現從簡單到複雜的特效。我們將深入探討純CSS動畫,通過過渡、轉換和關鍵幀,讓元素變得生動有趣。同時,我們也將挑戰自己,使用純JavaScript實現無需依賴庫的互動,從而提高網站效能和速度。

無論你是前端初學者還是經驗豐富的開發者,這個系列都將帶給你嶄新的思維。帶你製作令人驚艷的網站。

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day11 說滾不是真的要你滾 - 背景滾動視差

你有看過這種頁面往下滾,但圖片位置沒有往下的效果嗎? 這是舊版的毛哥EM資訊密技黑歷史。偷偷告訴你,這個效果只需要一行 CSS就可以做到。background...

2023-09-25 ‧ 由 毛哥EM 分享
DAY 12

Day12 Js 滾動視差 甚麼都能滾(ft. 國中數學)

以下內容是我高一在上公民課時體悟的數學大道理,和網路上大多的做法都不太一樣。這篇文章假設你已學會國中直線方程式。如果不會的話…我也沒辦法。 你有逛過 Ap...

2023-09-26 ‧ 由 毛哥EM 分享
DAY 13

Day13 今天我想來點… 顏色選單

昨天的內容是不是有一點燒腦?沒關係,今天來點輕鬆的,只有一行 JavaScript。 不管是在線上的文書軟體、製作網站的網站、或甚至是 iOS StandBy...

2023-09-27 ‧ 由 毛哥EM 分享
DAY 14

Day14 今天我想來點… 純 CSS 的開關

在手機開關的設定裡面通常不是 checkbox ,而是這種 toggle 開關。因為比較好看,且更有開關的感覺。 廢話不多說,今天就來把它做出來吧 原理 開...

2023-09-28 ‧ 由 毛哥EM 分享
DAY 15

Day15 今天我想來點...純 CSS 的並排選單

昨天我們做了一個開關,那麼我們今天就來做一個選單吧! 這個雖然是一種 radio 選單,但對於選擇數字這種有連續性,或著是比較短的文字,使用這種風格都是一種...

2023-09-29 ‧ 由 毛哥EM 分享
DAY 16

Day16 今天我想來...欸現在幾點? - CSS畫出 iOS 時鐘

今天我們要來製作一個時鐘。不使用圖片,只使用 CSS 來繪製。 我的目標是可以做出類似於 Apple iOS17 StandBy 的時鐘效果。 HTML 首...

2023-09-30 ‧ 由 毛哥EM 分享
DAY 17

Day17 css.wav - 純 CSS 波浪進度條

以往製作波浪效果不是使用 GIF 就是借助貝茲曲線。貝茲曲線就是 Ai 或是 Vectornator (現在叫做Curve) 裡面的鋼筆工具。隨便拉都會有波浪...

2023-10-01 ‧ 由 毛哥EM 分享
DAY 18

Day18 純 CSS DVD 反彈動畫

今天我們要使用純 CSS 實現 DVD 反彈動畫,讓大家認識 steps() 以及 animation-composition 屬性的使用方式,並提供這個實用...

2023-10-02 ‧ 由 毛哥EM 分享
DAY 19

Day19 純 CSS 做出彈出式 Lightbox

最討厭的廣告就是彈出式 Lightbox 廣告了,他會突然跳出來,然後你要去找那個超小的叉叉關掉他。今天我們不是要重現煩人的廣告,而是要來認識 CSS 選擇器...

2023-10-03 ‧ 由 毛哥EM 分享
DAY 20

Day20 GPU! 啟動! - 淺談 CSS3 硬體加速

今天我們要來探討如何善用使用者的 GPU 資源,讓網頁的動畫更加順暢。我盡量讓內容簡單易懂,可以當一篇科普文章閱讀。 瀏覽器的渲染流程 在我們討論之前,我們先...

2023-10-04 ‧ 由 毛哥EM 分享