背景是一个页面上占面积最大、却最不该被注意到的东西。
它的成败标准和别的组件正好相反：按钮做得好是「被看见、被点击」，标题做得好是「一眼抓住人」，而背景做得好是「没人特意去看它，但整个页面显得贵了一档」。一旦访客开始盯着你的背景看，通常说明它已经过头了——要么动得太厉害，要么把上面的文字压得不好读。
技术上，网页动态背景有三条路，成本差着数量级。第一条是纯 CSS 或 SVG：几 KB 代码，不占用 JavaScript 主线程，动画交给合成器，手机上也几乎没有代价。第二条是 Canvas 2D：要跑一个渲染循环，能做粒子、能做鼠标交互，成本可控但需要自己管好暂停。第三条是 WebGL，那是另一个量级的东西，能力最强也最重（这一路本文不收，单独写在Three.js 与 WebGL 网页 3D 特效那篇里）。
下面 14 款是童哲网上架的、走前两条路的背景特效，按用途分四组：纯 CSS 与 SVG 的轻量渐变、天气与季节氛围、粒子与鼠标交互、纹理滤镜与特殊玩法。每一款都写清楚它的实现方式、放在什么位置合适，以及会不会影响上面的内容。
选之前先定两件事
第一，文字还读不读得清。 背景的本职是给内容当底，不是抢戏。WCAG 2.1 的对比度标准是明确的：正文文字与背景的对比度至少 4.5:1，大号文字（18 点以上，或 14 点加粗，中日韩字体按等效字号算）至少 3:1。动态背景最容易翻车的地方在于——它是会变的，你在某一帧下测的对比度合格，动到另一帧可能就不合格了。务实的做法是：凡是要压文字的背景，都在背景和文字之间加一层半透明遮罩，或者干脆把文字放进一个有实底的容器里。别指望「大概能看清」，那通常意味着一部分人看不清。
第二，什么时候该停。 只要背景在动，它就在消耗设备资源。三个开关是标配：页面不可见时（document.hidden）暂停；元素滚出视口时暂停；系统开启了「减弱动态效果」时（prefers-reduced-motion）直接给静态画面。最后这一条不只是可访问性要求——前庭功能敏感的人看到持续运动的大面积画面会真的不适，而这类背景恰恰是全屏的。纯 CSS 的效果做这件事最省事，一个媒体查询就能把动画关掉。
第一组 · 纯 CSS 与 SVG 的轻量渐变（01 - 03）—— 代价接近于零
01. 二十多行 CSS 的无缝流光背景 —— 性价比最高的一款
纯 CSS 约 20 行 无 HTML 元素 无缝循环
无缝多彩流光背景，靠渐变和阴影做出颜色的无缝过渡，整个效果只有二十多行 CSS，而且不需要任何额外的 HTML 元素——不用往页面里插一堆 <div>，直接作用在容器上。
这一款的价值就在这个「几乎没有成本」上。动态背景最常见的失败不是不好看，是为了一点氛围付出了不成比例的代价：加载一个库、插入几十个元素、跑一个渲染循环，最后换来的效果一张渐变图也能做到。这一款反过来，代价接近于零，效果又比静态渐变多一层流动感，是那种「不知道用什么就先用它」的选择。
它的局限也来自简单：颜色变化是既定的循环，没有交互、没有随机性，看久了能看出周期。所以它适合访客停留时间短的位置——登录页、404 页、活动页的首屏、加载过渡页；放在需要长时间阅读的页面背后，那个循环会慢慢变得明显。
02. 极光渐变光束 hero 背景 —— 用 @property 做的平滑过渡
纯 CSS @property hero 区块 与标题融合
动态色彩条纹模拟光线穿透，配平滑动画让背景像在呼吸。它专门是为 hero 模块（首屏标题区）设计的——不是铺满整页，而是托住一块标题，让文字和背景的色彩产生关系。
技术上它用到了 @property，这一点值得展开。CSS 里的渐变角度、颜色这类自定义属性，浏览器默认是当字符串处理的，没法做补间动画——你写 transition 它会直接跳变。@property 的作用是给自定义属性声明类型（比如 <angle>、<color>），声明之后浏览器就知道该怎么在两个值之间插值，渐变才能真正「转起来」而不是一格一格跳。这是纯 CSS 能做出高级渐变动效的关键前提。
支持度已经不是问题了：按 caniuse 当前数据，Chrome / Edge 85+、Safari 16.4+（含 iOS）、Firefox 128+，全球覆盖约 94%。剩下那几个百分点看到的会是不动的渐变——这正是一个理想的渐进增强结果，不支持也不会坏。
要注意的是它和标题文字的配合是双刃剑：演示里文字和背景色彩融合得很好看，是因为文字颜色是挑过的。换成你自己的品牌色和文案长度，很可能出现某一帧下文字几乎看不见。上线前把动画拖到几个关键帧分别测一下对比度，别只看动起来的观感。
03. 2KB 的 SVG 五色流动背景 —— 体积最小的一款
纯 SVG 2KB 路径动画 无限循环
五种颜色的大色块以路径动画的方式无限流动，画面是抽象的、饱和度很高的那种现代插画感。整个文件 2KB——比一张最小的 JPEG 缩略图还小，而且是矢量的，放到 4K 屏上也不会糊。
和第 01 款的区别在于表达力：CSS 渐变做的是「颜色之间的过渡」，SVG 路径动画做的是「形状本身在变」，所以它的画面更有构成感，更像一张会动的海报。放在登录页、仪表盘的空状态、后台系统的欢迎页这些地方特别合适——这些页面内容本来就少，需要一点视觉重量来撑住。
要认清它的性格：色彩非常强烈，几乎不可能「隐形」。这意味着它不适合当正文页面的背景，压不住任何文字。正确用法是把它当成一块独立的视觉区域（半屏、一个卡片、一个侧栏），文字放在旁边而不是上面。想改配色的话，SVG 里就是几个填充色，改起来比 CSS 渐变还直接。
第二组 · 天气与季节氛围（04 - 07）—— 有保质期的效果
04. Canvas 樱花飘落 —— 物理参数做得最细的一款
Canvas + JS 150 片花瓣 无需图片素材 日系竖排排版
150 片随机大小的樱花在风力、重力与湍流的共同作用下横向飘散，带三维翻转和摆动。关键在于它的分层：小花瓣飘得快、大花瓣落得沉，这一条让画面立刻有了纵深，而不是一堆同样大小的花瓣平行下落。花瓣全部由代码实时绘制，不需要任何图片素材，画布自适应窗口尺寸。
演示页把它配上了人物与屋檐立绘、竖排俳句排版和大面积白色留白，还原黄昏庭院的静谧感——这是本文里唯一一款连「怎么用」都示范好了的，动漫资讯站、日系风格落地页、个人主页可以直接照着这个配比来。
季节性效果有个共同的问题要提前想：它有保质期。 樱花在三四月是氛围，到了十月就是不合时宜。两种处理办法：一是按日期自动开关（一段几行的判断），二是把它做成可关闭的装饰层而不是硬编码在背景里。做成开关还有个额外好处——移动端和低端设备可以默认关掉，150 片花瓣的实时绘制在旧手机上不是没有代价。
05. 纯 CSS 多层景深雪景 —— 不用一行 JS 的下雪
纯 CSS 多层景深 radial-gradient 形态混搭
和上一款同样是「落下来的东西」，但实现路子完全不同：这一款没有一行 JavaScript。雪花用 radial-gradient 画出来，靠不同的 animation-duration 和 animation-delay 制造出层次——有的清晰锐利（近景），有的模糊柔和（远景）；有的大而缓慢，有的小而快速。形态上还混搭了完整的六角雪花和简单的圆点雪粒，避免机械重复。背景是深蓝到深紫的渐变，冬夜的冷但不压抑。
把它和第 04 款并排看，能看出这两条技术路线的分工：Canvas 能做真实的物理模拟（风力、湍流、碰撞），CSS 只能做「预先编排好的运动」；但反过来，CSS 的成本低得多，动画跑在合成层上，不占主线程，手机上更稳，而且用一个 prefers-reduced-motion 媒体查询就能整体关掉。如果你要的只是氛围而不是模拟，CSS 这条路通常更划算。
它的限制是灵活性：雪花数量、位置、轨迹都写在 CSS 里，想加到两倍就得手写两倍的规则（或者用预处理器循环生成）。而且大量的 radial-gradient 元素在低端设备上也有绘制成本，别无限制地加。适合圣诞与新年活动页、冬季促销落地页、婚礼邀请函、冰雪旅游专题。
06. CSS 风雨雷电天气系统 —— 悬停改雨速，长按打雷
纯 CSS 悬停调雨速 长按闪电 交互式
一套用 CSS 动画搭出来的天气系统：悬停时雨速改变，长按触发闪电。「长按打雷」这个交互设计得挺妙——它把一个纯装饰性的背景变成了可以玩的东西，访客会主动去按一下，停留时间自然就上去了。
但正因为有交互，它的适用范围反而窄。悬停和长按都是要占用鼠标与触摸事件的，而背景层占用手势是大忌：用户想选文字、想滚页面，结果触发了闪电。所以这一款更适合作为一个明确的展示区块而不是整页背景——比如天气类产品的介绍页、互动装置、数字艺术页面，让人一眼看出「这块是可以摸的」。
另外闪电意味着大面积的明暗突变，这对光敏感人群是实打实的风险。如果站点面向大众，务必尊重「减弱动态效果」设置，开启时把闪电整个关掉，只保留静态的雨。这不是可选项。
07. 流星划过夜空 —— 全文最克制的一款
纯 CSS 极简 深色主题 不抢内容
从深蓝到近黑的夜空渐变，右上角一道白色光线斜向划过。没有繁复的星点，就这一道线——既可以理解成流星，也可以看成焰火升空的轨迹。
这一款在本文里是「少即是多」的样本。背景特效最容易犯的错是加法：既然要做氛围，那就再加点星星、再加点云、再加点粒子，最后变成一锅什么都有的画面，反而没有情绪。它反着来，只留一个动作，结果是整个页面的调性被一道光定住了。
它也因此是本组里唯一真正适合当长页面背景的：动作幅度小、频率低、颜色暗，放在个人博客首页、作品集、夜间模式主题的站点上，读者不会被它打断。深色渐变加浅色文字的对比度也天然容易达标。
要说短板：它的情绪非常明确（安静、夜晚、一点浪漫），这不适合需要活力和热闹的场景。电商促销页用它会显得冷清，那种场合该看第 03 款或第 09 款。
第三组 · 粒子与鼠标交互（08 - 11）—— 让访客多留几秒
08. 磁力粒子星座图 —— 可玩性最高的一款
原生 JS 磁力吸引 点击爆炸 尘埃层
满屏彩色粒子会被鼠标持续吸引，靠近时自动环绕旋转，粒子之间以及与鼠标之间用色相渐变的连线实时相连，像一张会动的星座图谱。交互层做得很细：
移动鼠标时粒子获得惯性动量，碰到边缘会弹回，不是简单的跟随；
点击触发粒子「爆炸」扩散，连续快速点击时爆炸强度会叠加——先把粒子聚成团再狂点，效果最夸张；
背景渐变色本身也在缓慢漂移，另有一层不参与交互的尘埃粒子专门用来丰富纵深。
它和其他背景的根本差别是：用户会主动去「戳」它，而不只是看它。 这是有实际价值的——落地页上多留几秒就是多几分转化机会，创意类站点的记忆点也常常就来自这种「可以玩一下」的小设计。
代价有两条。一是它接管了鼠标移动和点击，作全屏背景时要确认页面上的按钮和链接依然可点（通常靠层级和 pointer-events 处理），别为了背景把正事挡住了。二是粒子连线的计算量随粒子数呈平方增长——每一帧都要算两两之间的距离，粒子数一多，低端设备会明显掉帧。移动端把粒子数砍到桌面端的三分之一是常规操作。
09. 彩色形状波 —— 三种交互状态分得最清楚
Canvas + JS 三种状态 静止时低干扰 点击绽放
它把背景的三种状态明确地设计了出来，这一点在同类里很少见：
静止时——均匀的微图形点阵，颜色克制，几乎不抢页面的核心视觉；
鼠标悬浮时——对应区域的几何图形聚拢、放大、显色，形成跟随焦点；
点击按压时——全屏多彩几何图形波浪式绽放，视觉张力一次性拉满。
这个「静止时低干扰」的设计正是上一款欠缺的。 第 08 款无论你动不动鼠标，画面都一直在活跃；这一款默认是安静的，只有你去碰它才热闹起来。对于既想要互动性、又要放正经内容的页面（官网首页、作品集、活动专题），这个取舍明显更合适。
要留意的是点击绽放这个状态和页面上的真实点击会打架：用户点一个按钮，背景同时炸开一片彩色几何图形，注意力被抢走了。作全屏背景时建议把「点击绽放」限制在页面的空白区域，或者干脆只保留静止与悬停两态——那两态本身已经够用了。
10. 六球环形光效 —— 纯 CSS 做出来的交互光晕
纯 CSS @property mix-blend-mode 三角函数
六个渐变光球围绕中心呼吸、扩散，鼠标或手指移动时实时改变光球的散开半径与大小，深色底上的叠加发光过渡得很自然。
它在本组里的特殊之处是「有交互，但没有 Canvas」：靠 @property 做自定义属性动画、用 CSS 三角函数计算光球位置、用 mix-blend-mode 处理发光叠加，不依赖任何库，代码量极小。这意味着它没有渲染循环，没有主线程开销，在手机上的表现和一张静态图差不多——同样的交互感，成本却和第 08、09 款差着一个量级。
CSS 三角函数（sin()、cos()）和 @property 都是这两年才铺开的能力，这一款算是把它们用到位的一个样本。想学纯 CSS 能做到什么程度，它比很多教程直观。
限制在于表现力：光球数量是固定的六个，形态就是圆的、发光的，没有粒子那种「无数个体各自运动」的丰富度。它给的是氛围而不是复杂度。适合登录页、首屏、活动页的氛围铺垫，尤其是深色主题的站点——浅色底上 mix-blend-mode 的效果会完全不同，要重新调。
11. 六角点阵波纹扩散 —— 数据大屏那一路
Canvas 自动播放 波纹扩散 科技感
页面初始化后自动开始绘制六角点阵，波纹沿着网格轨迹扩散并伴随颜色变化，不需要用户做任何操作。深色底上的荧光线条是典型的「科技感」配方。
它和前三款的关键差别是不依赖鼠标，这在一类特定场景里是硬需求：数据大屏、展厅展示、监控看板、会议投屏——这些屏幕前根本没有鼠标，任何靠悬停触发的效果在那里都等于不存在。这一款自动播放、循环、无需交互，正好补上这个位置。
六角网格这个形状在科技类 UI 里近乎陈词滥调（蜂巢、分子结构、网络拓扑的联想都被用滥了），所以它的加分靠的是配色和节奏，不是形状本身。真要用，把线条颜色换成你自己的品牌色、把扩散速度调慢一点，效果会比默认的荧光绿更耐看。
另外大屏场景往往是七乘二十四小时常亮的，这时候「页面不可见就暂停」那套逻辑用不上，得反过来关注长时间运行的稳定性——内存有没有缓慢增长、Canvas 有没有重复创建。上线前挂一整天看一眼，比什么测试都实在。
第四组 · 纹理、滤镜与特殊玩法（12 - 14）
12. css-doodle 字母跟随背景 —— 一个值得认识的工具
css-doodle 网格生成 鼠标跟随 学习向
大写 A 和小写 a 平铺满整个页面，鼠标移动时这些字母跟着鼠标的方向上下位移，形成一片起伏的字母场。视觉上是很典型的现代平面设计语言，黑白两色就撑起了整个画面。
这一款的真正价值在于它用的工具：css-doodle 是一个基于 Web Component 的库，让你用近似 CSS 的语法快速生成网格化的图案。它的思路是——你不用手写一千个 <div>，只要声明「一个 20×20 的网格，每格按这个规则渲染」，剩下的交给它。做重复图案、生成艺术、装饰性背景时，这套写法比手写 CSS 或者写 Canvas 都快得多。
如果你经常要做背景图案，认识这个工具比拿走这一个效果更有价值。 它的语法学习成本不高，一个下午能上手，之后各种网格类背景基本都能自己生成。
代价是引入了一个额外依赖，而且是相对小众的一个——生态和文档都不如主流库丰富，出问题能搜到的答案有限。只用一个效果的话，把它生成的结果导出成静态 CSS 或 SVG，比在生产环境里带着这个库更划算。
13. 老电影复古胶片滤镜 —— 加在别人身上的效果
纯 CSS 滤镜 + 噪点 怀旧色调 可叠加
用 CSS 滤镜加噪点动画还原老电影质感：颗粒纹理在动，色调偏怀旧，还带轻微的闪烁。演示里是把它加在一张雪山照片上，一秒钟从「一张风景图」变成「一段胶片素材」。
它和本文其他所有效果都不是一类东西：别的背景是「自己生成一个画面」，它是「给已有的画面加一层处理」。 这个差别决定了它的用法——你的页面上本来就得有照片、视频或者插画，它才有对象可作用。反过来说，这也是它的优势：你不用换素材，只加一层 CSS，整站的图片就有了统一的调性，这对摄影作品集、影视类站点、复古风格的品牌页非常省事。
两点要注意。一是滤镜和噪点是有绘制成本的，尤其作用在大图或者视频上时，低端设备可能掉帧；只给关键的几张图加，别整站铺开。二是它会改变图片的真实颜色——如果你的图片是商品图，颜色失真就是转化杀手，这一款只适合作用在氛围图上，绝对不要用在需要看清楚颜色的地方。
14. CSS :has() 星球背景切换器 —— 不写 JS 的状态切换
纯 CSS :has() 伪类 :not() 组合 实验性
底部一排太阳系星球，点哪一颗，整页背景就切换成那颗星球的地表环境。整个交互没有一行 JavaScript，靠的是 CSS 的 :has() 伪类，配合 :not() 和悬停状态。
:has() 为什么重要，值得说清楚。CSS 长期以来只能「从上往下」选——父选子、前选后，永远没有「父选子」的能力。这就是为什么「某个输入框有内容时改变整个表单的样式」「选中了某个单选按钮时改变整页配色」这类需求过去必须靠 JavaScript 加类名。:has() 把这条限制打掉了：你可以写「包含了某个元素的祖先」，于是大量原本要写脚本的状态切换，现在纯 CSS 就能做。这一款就是这个能力的一个完整演示。
支持度已经很好了：按 caniuse 当前数据，Chrome / Edge 105+、Safari 15.4+（含 iOS）、Firefox 121+，全球覆盖约 94%。但要注意「94%」和「可以完全依赖它」还是两回事——不支持的浏览器上，这个切换器会变成一排点不动的星球，也就是功能直接消失。所以它更适合当成渐进增强的装饰层（不支持就是一个固定背景），而不是承载必要功能的交互。真要用在关键路径上，还是老老实实写 JS。
它自身的定位也偏演示：天文教育站、CSS 新特性演示、交互式课件是它的主场。
怎么选：从「放在哪一页」倒推
正文页面的背景——要的是安静：第 07 款（流星）、第 01 款（流光）、第 09 款静止状态下的点阵，这三个都不会打断阅读。切忌把粒子交互或者季节效果铺在长文章后面。
首屏与登录页——可以张扬一点，因为访客停留短：第 02 款（极光 hero）、第 03 款（SVG 五色）、第 10 款（六球光效）都是为这个位置设计的，其中第 10 款成本最低。
要访客多停留——第 08 款（磁力粒子）可玩性最高，第 09 款兼顾了互动与克制，第 06 款（长按打雷）最有惊喜感但最挑场景。
没有鼠标的场景（数据大屏、展厅、投屏）——只有第 11 款是为此设计的，其余带交互的在那里都等于静态。
最后一条贯穿全文的判断：本文 14 款里有 8 款是纯 CSS 或纯 SVG 实现的。 这不是巧合——背景这个位置，恰恰是「用最小的代价换氛围」最划算的地方。如果一个 Canvas 效果和一个 CSS 效果给你的观感差不多，选 CSS 那个，几乎总是对的。
几个常被问到的问题
Q：动态背景会影响网站速度和 SEO 吗？
纯 CSS / SVG 的几乎不影响——体积以 KB 计，也不阻塞渲染。Canvas 的要看两件事：脚本什么时候执行（放在首屏内容渲染之后，别和关键渲染路径抢），以及它有没有引起布局偏移（画布要预留好尺寸，别加载后把内容挤下去，这一项直接影响页面体验指标）。至于内容层面，背景里没有文字信息，搜索引擎既读不到也不需要读，不存在「背景内容被收录」的问题。
Q：背景动画在手机上要不要关掉？
不用一刀切，但要分档。纯 CSS 的可以留；Canvas 的建议减量（粒子数减半、帧率降到 30、关掉连线计算）；常驻绘制的（第 04、08、09、11 款那类）一定要接上「页面不可见就暂停」，否则用户切到别的 App，你的背景还在后台耗电。另外别忘了 prefers-reduced-motion，那是用户明确表达过的偏好。
Q：怎么保证背景上的文字一直看得清？
三个办法，从省事到讲究：加遮罩层（背景和内容之间垫一层半透明黑或白，最通用）；给文字容器加实底或毛玻璃（内容区块自带背景，和背景动画彻底解耦）；限制背景的明度范围（在动画里把颜色的亮度控制在一个区间内，从源头保证对比度）。前面说的 4.5:1 是底线，测的时候记得把动画停在几个不同的帧分别测，只测一帧不算数。
Q：季节性背景（下雪、樱花）怎么管理？
别硬编码进模板。做成一个可以按日期开关的独立脚本或样式表，到季节就挂上、过季就摘掉，这样每年不用改代码。同时给它一个手动关闭的入口——总有一部分访客觉得飘来飘去的东西碍事，尤其是在填表单或者阅读长文的时候。关闭状态记在本地存储里，下次进来别再飘。
Q：纯 CSS 和 Canvas 到底怎么选？
一句话：如果效果不需要「每个元素各自独立地响应外部输入」，就用 CSS。 预先编排好的运动（雪、雨、渐变流动、光晕呼吸）CSS 都做得了，而且更省；一旦你需要真实的物理模拟、粒子之间互相影响、或者跟随鼠标的实时计算，那才轮到 Canvas。本文第 04 款和第 05 款（Canvas 樱花 vs CSS 雪景）就是这条界线两侧最好的对照。
本文的 14 款都在童哲网前端资源板块。相关的几篇：CSS 加载动画与进度条效果（首屏加载时的过渡画面）、网页标题与文字特效合集（背景配好了，标题也得跟上）、卡片与布局效果合集（压在背景上的内容容器）、Three.js 与 WebGL 网页 3D 特效（想要更重的三维背景走这条路）。
