你有没有想过一屏网页背后不用任何图片、不写一行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是确定性的规则你来定但在规则之上叠加动画曲线、无限循环、用户交互画面就拥有了随机感和生命力。这种“在规则中失控”的张力恰恰是视觉诗篇的源头。