好玩的 CSS - 40 個有趣的 CSS 網站

🔖 好玩的 CSS - 40 個有趣的 CSS 網站

🌐 基礎學習

cssreference.io/ CSS 參考書

chokcoco.github.io/CSS-Inspira… CSS 靈感

www.awwwards.com/sites/zero-… UI 設計師的靈感源泉

htmlcheatsheet.com/css/ 交互式在線 CSS 速記表

zh.learnlayout.com/ 學習 CSS 佈局

css-tricks.com/ CSS 小花招

web.dev/learn/css/ web.dev 上的 CSS 教學專欄

www.w3schools.com/howto/ W3 How To 學習如何實現常見的頁面組件

codemyui.com/tag/pure-cs… 450 多個純 CSS 實現的 UI 設計 by Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

🧚 CSS 動畫

純 CSS 動畫，這裏不包含 JS 動畫庫

animate.style/ CSS 動畫集

tholman.com/obnoxious/ 不過腦子的動效，不過看起來很「猛」

elrumordelaluz.github.io/csshake/ CSS 抖動特效

animxyz.com/ CSS 三維變換動畫

animista.net/play/ CSS 動畫集，可自由調節動畫參數，生成代碼片斷

ianlunn.github.io/Hover/ CSS 鼠標懸浮動畫

www.minimamente.com/project/mag… 適合作專場動畫的 CSS 動效

🕹️ 教學遊戲

cssgridgarden.com/ 經過給蘿蔔澆水，學習 CSS 網格佈局

www.flexboxdefense.com/ CSS 塔防遊戲，學習 flex 佈局

flukeout.github.io/ 經過作飯，練習 CSS 選擇器

flexboxfroggy.com/ 送小青蛙回家，學習 flex 佈局

🎰 代碼生成

cssboxshadow.com/ 盒子陰影 box-shadow 生成器

glassgenerator.netlify.app/ 磨砂透明效果

coolbackgrounds.io/ 酷酷的背景圖

www.pixelartcss.com/ 自定義像素素材

stripesgenerator.com/ 布條背景圖生成器

svgwave.in/ 波紋生成器

numl.design/theme-gener… numl design 的主題生成器

color.adobe.com/zh/create/c… adobe 針對色盲用戶可訪問性，提供的一個色彩拾取工具

9elements.github.io/fancy-borde… 圓角 border-radius 的新玩法

• 根據上面的圓角，咱們能夠畫出一滴水珠💦 codepen.io/prathkum/pe…

accordionslider.com/ 純 CSS 實現百葉窗

grid.layoutit.com/ 網格佈局生成器

csslayout.io/ 純 CSS 實現的一套頁面元素、組件集

keyframes.app/animate/ CSS 動畫生成器

cssanimate.com/ 又一個 CSS 動畫生成器

www.cssfiltergenerator.com/ CSS 濾鏡

imageslidermaker.com/ CSS 輪播生成器，依賴 jQuery 😂

www.30secondsofcode.org/css/p/1 30 秒代碼片斷 — CSS 篇

🎨 色彩搭配

colorhunt.co/ Color Hunt

mycolor.space/ 仍是配色

clrs.cc/ 仍是配色

cssgradient.io/ CSS 漸變色

參考：

• github.com/jobbole/awe… CSS 資源大全中文版
• github.com/awesome-css… Awesome CSS
• juejin.cn/post/690371… 一些CSS特效網站整理