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

🔖 好玩的 css - 40 个有趣的 css 网站

常用的：

 1.动态的波纹SVG 图片生成器 ：  
 https://svgwave.in/
 （Svgwave 一款有趣的 SVG 渐变波浪图案生成器，用户完全可以自定义所需的波浪密度、层次、高度比例、渐变颜色、以及波浪样式，图形的每一次调整都会及时体现出来，让用户拥有最佳的调整视觉，图形完成后，可以获得 SVG 图形的代码，也可以直接下载图形的 PNG 文件，供以后使用。）

 2.背景生成器：
 https://bggenerator.com/
（一个免费的在线图像生成器，它使用好几种不同的模板和样式来生成独特的创意超大分辨率图片，可以很好的帮助设计师来快速解决问题。同时制作完成后支持 JPG 和 PNG 两种格式下载。）

3.Gradient Magic官网
传送门：https://www.gradientmagic.com/
（一个免费的奇妙和独特的 css 渐变背景图案生成网站，提供多种风格的 css 图案样式，比如：条纹背景、圆圈背景、纹理背景、流行背景等等，选择一种样式后可以根据自己的喜爱更改颜色和渐变方向，最后复制 CSS 代码就可以了。）

4.Pattern Library官网
地址：http://thepatternlibrary.com/
（收集不同设计师的精美背景图案汇总清单，完全可以平铺的背景图案，有多种风格的背景图案，比如几何形、扁平化、复古经典、条纹等等，值得收藏的创意背景图案。）

5.磨砂透明效果生成好看的边框 
https://glassgenerator.netlify.app/
（Glass Morphism 一个有趣的在线 CSS 玻璃风格工具，可以通过调整透明度、模糊程度、边界、边界半径、玻璃颜色等等，就可以一键生成在线 CSS 样式代码，可轻松用于美化网站以及应用界面，是前端设计师不容错过的在线工具哦。）

6.渐变特殊玻璃背景 ：
https://coolbackgrounds.io/
（Cool Backgrounds 目前提供五个背景选项，从动态粒子到广受欢迎的 Unsplash。随着时间的推移，Cool Backgrounds 会不断添加更多选项，成为网络上最佳背景图像工具的精选存储库。）


7.生成像素 图片：（可以方便快捷的作画，生成像素图以及css代码。简单调整即可使用。）
https://pixelartcss.com/

🌐 基础学习

https://cssreference.io/ CSS 参考书
https://chokcoco.github.io/CSS-Inspiration/#/ CSS 灵感
https://www.awwwards.com/sites/zero-impact UI 设计师的灵感源泉
https://htmlcheatsheet.com/css/ 交互式在线 CSS 速记表
https://htmlcheatsheet.com/css/ 学习 CSS 布局
https://css-tricks.com/ CSS 小花招
https://web.dev/learn/css/ web.dev 上的 CSS 教学专栏
www.w3schools.com/howto/ W3 How To 学习如何实现常见的页面组件
https://codemyui.com/tag/pure-css/ 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 鼠标悬浮动画
https://www.minimamente.com/project/magic/ 适合做专场动画的 CSS 动效

🕹️ 教学游戏

cssgridgarden.com/ 通过给萝卜浇水，学习 CSS 网格布局
www.flexboxdefense.com/ CSS 塔防游戏，学习 flex 布局
flukeout.github.io/ 通过做饭，练习 CSS 选择器
flexboxfroggy.com/ 送小青蛙回家，学习 flex 布局

🎰 代码生成

🌚

tiny-helpers.dev/

glassgenerator.netlify.app/ 磨砂透明效果
coolbackgrounds.io/ 酷酷的背景图
www.pixelartcss.com/ 自定义像素素材
stripesgenerator.com/ 布条背景图生成器
svgwave.in/ 波纹生成器
https://numl.design/theme-generator numl design 的主题生成器
https://color.adobe.com/zh/create/color-accessibility adobe 针对色盲用户可访问性，提供的一个色彩拾取工具
https://9elements.github.io/fancy-border-radius/ 圆角 border-radius 的新玩法

根据上面的圆角，我们可以画出一滴水珠💦https://codepen.io/prathkum/pen/xxEMoZy

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