iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

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

Day1 相見歡 - 庫就不酷嗎?

哈囉大家好我是毛哥EM,歡迎來到 【不用庫 也能酷 - 玩轉 CSS & Js 特效 】 在這30天裡面我會先帶大家複習一些許多人搞不懂但很重要的語法,...

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

Day2 如何打的更快 | Emmet & 預測輸入

記得我在國一寫HTML的時候,傻傻的在那裡打小於、h1、大於、標題、小於、斜線、大於。我的朋友甚至發現了一個偷吃步就是先打好一堆大於小於,然後再填空。 既然HT...

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

Day3 用 Flex 切遍天下

當你拿到一張設計圖要照著做出來你的第一反應是什麼呢?是直接套 bootstrap 再說嗎?但我幾乎所有的切版**只要是整齊能畫出網格的,我都會使用flex。**...

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

Day4 自己動! @keyframes 與 Transition

今天我們要來玩玩 CSS 動畫。CSS動畫有兩種: @keyframes - 動作效果 transition - 轉場效果 我們今天都拿 PowerPoin...

2023-09-18 ‧ 由 毛哥EM 分享
DAY 5

Day5 載入中… Animation-delay

我看到有其他人做 Banner 看起來還蠻酷得所以我也用 Ai 搞了一個 (是 Ai 不是 AI...) 假設你今天想製作這個載入動畫… https://...

2023-09-19 ‧ 由 毛哥EM 分享
DAY 6

Day6 你怎在這? 攻克 Position

在使用 CSS 做網站時幾乎一定會使用到 position 屬性,不過你真的知道它的原理和使用方式嗎?雖然乍看之下感覺很複雜但其實超簡單,你只需要幾分鐘就能完...

2023-09-20 ‧ 由 毛哥EM 分享
DAY 7

Day7 幫我開濾鏡 filter

CSS 的濾鏡屬性是一個非常實用且可以瞬間讓一個網頁看起來很厲害的功能。讓你可以以各種方式修改和調整圖像和元素的呈現方式,也可以讓元素模糊,或者是直接改變圖示...

2023-09-21 ‧ 由 毛哥EM 分享
DAY 8

Day8 滿足你的色域! color: color

今天這一篇是一個很色的冷知識分享。可以讓你調出很冷的顏色。 你平常用 CSS 都在怎麼表示顏色呢?是使用 RGB 還是 HEX 碼呢?不管你是使用哪一種他...

2023-09-22 ‧ 由 毛哥EM 分享
DAY 9

Day9 給你五彩斑斕的黑: mix-blend-mode

昨天我們只是一個人的色而已,今天疊在一起更刺激。 你有使用過 iOS17 的 StandBy 功能嗎?就是那個你一定要買磁吸充電還要喬好角度的功能。這不是...

2023-09-23 ‧ 由 毛哥EM 分享
DAY 10

Day10 永無止境跑馬燈 - 不同螢幕 相同速度

這是我高一在學校吃肉蛋吐司時想到的做法,因此此篇文章假設你已熟悉國小數學。 傳統跑馬燈雖然在現代乍看之下是一個又醜又過時的設計,但是如果應用的好的話其實是...

2023-09-24 ‧ 由 毛哥EM 分享