好玩的 CSS - 40 个有趣的 CSS 学习网站

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

🌐 基础学习

cssreference.io/^[1] CSS 参考书

chokcoco.github.io/CSS-Inspira…^[2] CSS 灵感

www.awwwards.com/sites/zero-…^[3] UI 设计师的灵感源泉

htmlcheatsheet.com/css/^[4] 交互式在线 CSS 速记表

zh.learnlayout.com/^[5] 学习 CSS 布局

css-tricks.com/^[6] CSS 小花招

web.dev/learn/css/^[7] web.dev 上的 CSS 教学专栏

www.w3schools.com/howto/^[8] W3 How To 学习如何实现常见的页面组件

codemyui.com/tag/pure-cs…^[9] 450 多个纯 CSS 实现的 UI 设计 by Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀

🧚 CSS 动画

纯 CSS 动画，这里不包含 JS 动画库

animate.style/^[10] CSS 动画集

tholman.com/obnoxious/^[11] 不过脑子的动效，不过看起来很“猛”

elrumordelaluz.github.io/csshake/^[12] CSS 抖动特效

animxyz.com/^[13] CSS 三维变换动画

animista.net/play/^[14] CSS 动画集，可自由调节动画参数，生成代码片段

ianlunn.github.io/Hover/^[15] CSS 鼠标悬浮动画

www.minimamente.com/project/mag…^[16] 适合做专场动画的 CSS 动效

🕹️ 教学游戏

cssgridgarden.com/^[17] 通过给萝卜浇水，学习 CSS 网格布局

www.flexboxdefense.com/^[18] CSS 塔防游戏，学习 flex 布局

flukeout.github.io/^[19] 通过做饭，练习 CSS 选择器

flexboxfroggy.com/^[20] 送小青蛙回家，学习 flex 布局

🎰 代码生成

cssboxshadow.com/^[21] 盒子阴影 box-shadow 生成器

glassgenerator.netlify.app/^[22] 磨砂透明效果

coolbackgrounds.io/^[23] 酷酷的背景图

www.pixelartcss.com/^[24] 自定义像素素材

stripesgenerator.com/^[25] 布条背景图生成器

svgwave.in/^[26] 波纹生成器

numl.design/theme-gener…^[27] numl design 的主题生成器

color.adobe.com/zh/create/c…^[28] adobe 针对色盲用户可访问性，提供的一个色彩拾取工具

9elements.github.io/fancy-borde…^[29] 圆角 border-radius 的新玩法

• 根据上面的圆角，我们可以画出一滴水珠💦 codepen.io/prathkum/pe…^[30]

accordionslider.com/^[31] 纯 CSS 实现百叶窗

grid.layoutit.com/^[32] 网格布局生成器

csslayout.io/^[33] 纯 CSS 实现的一套页面元素、组件集

keyframes.app/animate/^[34] CSS 动画生成器

cssanimate.com/^[35] 又一个 CSS 动画生成器

www.cssfiltergenerator.com/^[36] CSS 滤镜

imageslidermaker.com/^[37] CSS 轮播生成器，依赖 jQuery 😂

www.30secondsofcode.org/css/p/1^[38] 30 秒代码片段 — CSS 篇

🎨 色彩搭配

colorhunt.co/^[39] Color Hunt

mycolor.space/^[40] 还是配色

clrs.cc/^[41] 还是配色

cssgradient.io/^[42] CSS 渐变色

参考：

• github.com/jobbole/awe…^[43] CSS 资源大全中文版

• github.com/awesome-css…^[44] Awesome CSS

• juejin.cn/post/690371…^[45] 一些CSS特效网站整理

关于本文

作者：snoopylion

https://juejin.cn/post/6982363593241002014

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍