🌐 基础学习
- CSS 参考书
- CSS 灵感
- UI 设计师的灵感源泉
- 交互式在线 CSS 速记表
- 学习CSS布局
- CSS-Tricks
- Learn CSS -- 谷歌家 web.dev 上的 CSS 教学专栏
- W3Schools How TO - Code snippets for HTML, CSS and JavaScript --- W3 How To 学习如何实现常见的页面组件
- 450 多个纯 CSS 实现的 UI 设计 Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀
🧚 CSS 动画
纯 CSS 动画,这里不包含 JS 动画库- Animate.css | A cross-browser library of CSS animations. --- css 动画集
- Obnoxious.css --- 不过脑子的动效,不过看起来很“生猛”
- CSS 抖动特效
- CSS 三维变换动画
- Animista - CSS Animations on Demand --- CSS 动画集,可自由调节动画参数,生成代码片段
- Hover.css - A collection of CSS3 powered hover effects --- CSS 鼠标悬浮动画
- Magic CSS animations --- 一款非常适合做转场动画的 CSS 动画库
🕹️ 教学游戏
- Grid Garden --- CSS 萝卜浇水,学习网格布局
- Flexbox Defense --- CSS 塔防游戏,学习 flex 布局
- CSS Diner --- CSS 干饭,练习 CSS 选择器
- Flexbox Froggy --- 送小青蛙回家,学习 flex 布局
🎰 代码生成
Box Shadow --- 盒子阴影生成器
Glass Morphism --- 磨砂透明效果
Cool Backgrounds --- 酷酷的背景图
Pixel Art to CSS --- 自定义像素素材
Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS --- 布条背景图生成器
Svg Wave - A free & beautiul gradient SVG wave Generator. --- 波纹生成器
CSS Color Theme Generator by Numl.Design --- numl design 的主题生成器
adobe 色彩拾取工具 --- adobe 针对色盲用户可访问性,提供的一个色彩拾取工具
Fancy Border Radius Generator --- 圆角的新玩法
根据上面的圆角,我们可以画出一滴水珠💦 https://codepen.io/prathkum/pen/xxEMoZy
CSS Accordion Slider Generator --- 纯 CSS 百叶窗
Layoutit Grid - CSS Grids layouts made easy! --- 网格布局生成器
CSS Layout ∙ A collection of popular layouts and patterns made with CSS --- 纯 CSS 的页面元素集
Keyframes.app | CSS Toolbox --- CSS 动画生成器
CSS3 Keyframes Animation Generator --- 又一个 CSS 动画生成器
CSSfiltergenerator.com --- CSS 滤镜
Image Slider Maker --- 轮播生成器
CSS Snippets - 30 seconds of code --- 30 秒代码片段 — css 篇
🎨 色彩搭配
参考:
https://github.com/jobbole/awesome-css-cn CSS 资源大全中文版
https://github.com/awesome-css-group/awesome-css Awesome CSS
https://juejin.cn/post/6903712420485660685 一些CSS特效网站整理