純 CSS 動畫與特效
掌握 animation、transition、transform，不靠 JavaScript 也能做出流暢特效。
Course
不用庫也能酷：玩轉 CSS & JS 特效
不用框架也能做出動畫、互動和微型特效。30 天鐵人賽系列，從基礎特效到進階互動一步一步帶你實作。
原生 JS 互動設計
用 DOM 操作與事件監聽做出真實互動，理解框架背後的原理。
30 個可直接使用的特效元件
每天一個實作範例，從跑馬燈、時鐘到 3D 卡片效果，累積可複用的元件庫。
30 單元
Target audience: 零基礎 / 鐵人賽 / 30 天
Reading path
30 章節
最後更新 2023.10.14
適合
所有學習者
所有學習者
Day1 相見歡 - 庫就不酷嗎？
哈囉大家好我是毛哥EM，歡迎來到 **【不用庫 也能酷 - 玩轉 CSS & Js 特效】**
Day2 如何打的更快 | Emmet & 預測輸入
記得我在國一寫 HTML 的時候，傻傻的在那裡打小於、h1、大於、標題、小於、斜線、大於。我的朋友甚至發現了一個偷吃步就是先打好一堆大於小於，然後再填空。
Day3 用 Flex 切遍天下
當你拿到一張設計圖要照著做出來你的第一反應是什麼呢？是直接套 bootstrap 再說嗎？但我幾乎所有的切版**只要是整齊能畫出網格的，我都會使用 flex。**而這個網格也不一定是正方形，只要是矩形就可以了。
Day4 自己動！@keyframes 與 Transition
今天我們要來玩玩 CSS 動畫。CSS 動畫有兩種：
Day5 載入中… Animation-delay
假設你今天想製作這個載入動畫…
Day6 你怎在這？攻克 Position
在使用 CSS 做網站時幾乎一定會使用到 position 屬性，不過你真的知道它的原理和使用方式嗎？雖然乍看之下感覺很複雜但其實超簡單，你只需要幾分鐘就能完全理解了。
Day7 幫我開濾鏡 filter
CSS 的濾鏡屬性是一個非常實用且可以瞬間讓一個網頁看起來很厲害的功能。讓你可以以各種方式修改和調整圖像和元素的呈現方式，也可以讓元素模糊，或者是直接改變圖示顏色等等。今天我們將深入探討 CSS filter 屬性，解釋其各種功能以及如何使用它來建立引人注目的效果。
Day8 滿足你的色域！color: color
今天這一篇是一個很色的冷知識分享。可以讓你調出很冷的顏色。
Day9 給你五彩斑斕的黑：mix-blend-mode
> 昨天我們只是一個人的色而已，今天疊在一起更刺激。
Day10 永無止境跑馬燈 - 不同螢幕 相同速度
> 這是我高一在學校吃肉蛋吐司時想到的做法，因此此篇文章假設你已熟悉國小數學。
Day11 說滾不是真的要你滾 - 背景滾動視差
你有看過這種頁面往下滾，但圖片位置沒有往下的效果嗎？
Day12 Js 滾動視差 甚麼都能滾 (ft. 國中數學)
> 以下內容是我高一在上公民課時體悟的數學大道理，和網路上大多的做法都不太一樣。這篇文章假設你已學會國中直線方程式。如果不會的話…我也沒辦法。
Day13 今天我想來點… 顏色選單
昨天的內容是不是有一點燒腦？沒關係，今天來點輕鬆的，只有一行 JavaScript。不管是在線上的文書軟體、製作網站的網站、或甚至是 iOS StandBy 都會有顏色選單。今天我們就來做一個極簡的吧，還要加上自訂顏色的功能。
Day14 今天我想來點… 純 CSS 的開關
在手機開關的設定裡面通常不是 checkbox，而是這種 toggle 開關。因為比較好看，且更有開關的感覺。
Day15 今天我想來點...純 CSS 的並排選單
昨天我們做了一個開關，那麼我們今天就來做一個選單吧！
Day16 今天我想來...欸現在幾點？- CSS 畫出 iOS 時鐘
今天我們要來製作一個時鐘。不使用圖片，只使用 CSS 來繪製。我的目標是可以做出類似於 Apple iOS17 StandBy 的時鐘效果。
Day17 css.wav 純 CSS 波浪進度條
以往製作波浪效果不是使用 GIF 就是借助貝茲曲線。貝茲曲線就是 Ai 或是 Vectornator (現在叫做 Curve) 裡面的鋼筆工具。隨便拉都會有波浪的感覺，且使用 SVG 或 JavaScript Canvas 都不難實現。
Day18 純 CSS DVD 反彈動畫
今天我們要使用純 CSS 實現 DVD 反彈動畫，讓大家認識 `steps()` 以及 `animation-composition` 屬性的使用方式，並提供這個實用的應用。(應該吧...)
Day19 純 CSS 做出彈出式 Lightbox
最討厭的廣告就是彈出式 Lightbox 廣告了，他會突然跳出來，然後你要去找那個超小的叉叉關掉他。今天我們不是要重現煩人的廣告，而是要來認識 CSS 選擇器 `:target` 並做出以下效果。
Day20 GPU! 啟動！- 淺談 CSS3 硬體加速
今天我們要來探討如何善用使用者的 GPU 資源，讓網頁的動畫更加順暢。我盡量讓內容簡單易懂，可以當一篇科普文章閱讀。
Day21 就是要對決 - CSS 和 JS 動畫，哪個更絲滑？
今天是第二十一天，已經走完 2/3 的路程，我媽還以為我早被淘汰了。這個系列明明是叫【不用庫 也能酷 - 玩轉 CSS & Js 特效】，但 Js 出現了幾篇？有五篇嗎？難道 JavaScript 是來湊關鍵字的嗎？今天就來聊聊為甚麼使用純 CSS 做效果如此吸引人。
Day 22 JavaScript 乱薍覼釠亂碼效果
今天我們要來做一些乱薍覼釠亂碼效果。
Day23 優雅的漸層動畫 - 隨機而有秩序
今天我們會提到幾個不同的原理。你可以像生菜沙拉一樣自己條配。
Day24 CSS 相融黏滯效果
今天我們要來做這個紓壓的效果：
Day25 有料的 CSS 漢堡選單
我們今天要來做幾份漢堡選單。
Day26 不要躲在下面動！Animate On Scroll 自己做
我們都知道 CSS 動畫可以用 `@keyframes` 來做，但是他們都是馬上就觸發的。就算元素還沒有出現在畫面上，動畫也已經開始了。
Day 27 iT 邦幫忙::一起幫忙製作導覽列，拯救第 27 天
今天我們要來製作 iT 邦幫忙首頁的導覽列。我們先來看看原本的網站。
Day28 純 JavaScript Slider (ft. CSS scroll-snap-type)
今天我們要來製作 Slider 效果。不過要用一個你應該沒有看過有人這樣做但卻很簡單的方法。
Day 29 鐵人賽太空粒子的例子
相信大家對於這個頁面都不陌生吧。這是我們 2023 iThome 鐵人賽的首頁。我覺得他的粒子特效和地球很酷，所以我們今天就來看看怎麼做吧。
Day30 三十天的血與淚 - 密技
不知不覺，三十天的鐵人賽就要結束了。一開始還覺得時間很漫長，但到了二十幾天之後我開始發現時間不多了，十分珍惜每一次能夠和大家分享的機會。
Comments
留言區