你有没有想过，一屏网页背后，不用任何图片、不写一行JavaScript，仅靠几十行CSS，就能生成一幅会流动的视觉作品？
我最早接触CSS生成艺术这个概念，是在逛CodePen的时候。满屏都是别人用纯CSS做的炫酷背景、抽象动画，第一反应是不敢信：CSS不是只能排版、上色、做做悬浮效果吗？直到自己一点点拆解那些代码，才意识到这东西的想象力远超预期——CSS里的渐变、混合模式、滤镜、裁剪路径，全是绘制语言；CSS变量、自定义属性、动画帧，全是生成参数。把这两套东西组合起来，就能像写诗一样，用代码描绘出一幅幅会呼吸的视觉画面。
这篇文章我计划把它写成“CSS生成艺术”系列里最实操的一篇，从为什么值得用纯CSS做、核心技法怎么拆，到三个可直接复制运行的demo，最后把我在实际创作中踩过的坑全部列出来。无论你是前端新手，还是想拓宽创作边界的设计开发者，这篇文章都适用。先说一下，前两篇我们分别聊了CSS变量和动画曲线，这一篇会用上它们，但也会把原理重新讲清楚，没看过前两篇也不影响跟上。 ## 0. 动手之前，先聊聊什么是“CSS生成艺术”
先把这个话题说透。生成艺术（Generative Art）并不是一个新词，它指的是：由一套规则、算法或参数体系自动生成视觉作品的艺术形式。人负责定义规则，机器负责执行和随机演化，最后得到的图像往往带有一种“非人刻意设计”的意外美感。这放在上世纪是Processing、openFrameworks这些编程工具的天下，放在今天，浏览器里的CSS也能干这件事，而且干得有模有样。
为什么偏偏是CSS？
我个人的理解是：浏览器本身就是全球最大的渲染引擎。CSS——层叠样式表——从诞生起就是一个描述视觉的声明式语言，天生自带“绘制”属性。你可以用background写渐变背景，用clip-path切出几何形状，用filter做模糊辉光，用mix-blend-mode做色彩融合，再用CSS变量把这些参数全部抽出来，配合动画自动演化。整个过程不需要Canvas，不需要SVG，不需要任何绘图库，一个.html文件就能跑起来。
我接触这个方向的头一个月，最大的变化是“看CSS的眼光变了”：以前看到一个按钮，关注的是它圆角够不够大、阴影够不够真实；现在会下意识分析它的渐变停靠点、混合模式、裁剪路径，会想这个效果能不能参数化、能不能让它自己变化起来。这篇文章就是想把我这个“眼光变化”的过程完整写下来，从原理到实操，一条线走通。
我自己定义的“CSS生成艺术”有三个标准：
- 纯CSS实现，不依赖Canvas和JavaScript绘图，交互逻辑可以用少量JS配合，但画面渲染必须由CSS完成；
- 具备生成性，即画面不是静态死图，而是通过参数变化、动画帧、变量控制不断演化；
- 具备艺术性，即画面有一定审美意图，而不是单纯炫技。
接下来会把这三条标准拆成具体技法，再用完整demo一条条落地。先放一个结论：CSS生成艺术最迷人的地方在于，它把“确定性”和“随机性”结合得恰到好处。CSS是确定性的，规则你来定；但在规则之上叠加动画曲线、无限循环、用户交互，画面就拥有了随机感和生命力。这种“在规则中失控”的张力，恰恰是视觉诗篇的源头。
