给网站加一场雪或者一阵雨，可选的做法比想象中多：有 257 字节就能搞定的，也有拿 WebGL 实时渲染每一片冰晶的。二十款按用途排开，先挑你要的那一类。
下雪（01–06）——整屏氛围，从 257 字节到 WebGL 都有
下雨与雷雨（07–12）——整屏的雨、盖在图片上的雨、窗户外面的雨
真的用来显示天气的组件（13–18）——有温度、有城市，要接数据
把「雨」当文字用（19–20）——代码雨、文字雨，和天气无关
另外三件事先记着：这类特效都是盖在内容之上的一层，所以它可能挡住点击、可能该听系统的「减少动效」、季节过了还得能关掉。具体怎么处理，第一组结束后有一段专门讲。
第一组 · 下雪：从 257 字节到 WebGL
同样是雪，六款之间差着两个数量级的代码量。先按你能接受的重量选，再看好不好看。
01. 257 字节的雪
资源页标的体积是 257 字节。这个量级基本等于没有配置项——密度、速度、形状都是写死的；换来的是你可以把它直接贴进任何一个页面，不用考虑加载顺序和依赖。
适合「想意思一下」的场景：圣诞节前一周挂上去，节后删掉一行就没了。
02. 纯 CSS 的基础款
没有 JavaScript，随机的下落轨迹用 CSS 动画排出来。比上一款多了层次感，又不需要引任何库。
纯 CSS 方案的共同上限在这里一并说了：每一片雪花都是一个真实的 DOM 节点。想要上千片，浏览器就要维护上千个元素的动画，这时候该往 Canvas 那边走。
03. 手机上雪花会自己变小
作者在详情页里专门写了这一条：小屏幕上雪花尺寸会跟着缩小。这不是客套话——桌面端调好的雪花直接搬到 375 像素宽的屏幕上，通常就是几个大白点在糊屏。移动端流量占大头的站，这一组里先试它。
04. 同一个作者的两种雪量，一起给你
这两款是一对：同作者、同技术（GSAP + Canvas），区别只有雪量。作者自己在详情页里让读者二选一——「喜欢大雪纷飞就选大雪那款，喜欢雪花飘飘的浪漫温馨场景就选小雪那款」，并且说两款都只需要百行以内代码。
换成 Canvas 之后，雪花不再是 DOM 节点而是画布上的像素，数量可以往上加。这是它们相对前面三款的实际差别。
05. 最重的一款：WebGL 冰晶
Canvas 加 WebGL 实时渲染的超大号雪花，每一片的形态、通透质感和光影都不一样，底下配深蓝渐变背景。它是这一组里视觉上最像「作品」而不是「装饰」的一个。
两个代价要先知道：它是本文最吃 GPU 的一款，老设备和集成显卡上要自己试过再决定；它自带深蓝背景，搬到浅色页面上需要改。
06. 不铺满屏，只在元素顶上堆一层雪
用法和前面五款完全不同：给任意元素加一个 collider 类，它就会在该元素顶部生成一条不规则的积雪边缘，配合背景里飘落的雪花。
也就是说它不是背景层，是能挂在卡片、价格表、活动 banner 上的装饰件。做冬季专题页或节日促销，「雪堆在盒子上」比满屏飘雪更像是设计过的。
插一段 · 这类特效上线前要过的三关
一、它会不会把下面的按钮吃掉。整屏铺开的雪花层通常是一个满屏的 fixed 容器，如果没给它写 pointer-events: none，用户点页面上任何东西都会先撞到这层雪。凡是作者按「背景」写的基本都处理过，但你改了层级、改了容器尺寸之后要再验一次——办法很笨也很管用：把鼠标移到页面最顶上的按钮，看光标变不变成手型。
二、要不要听系统的「减少动效」。操作系统里有一个给前庭功能障碍人群准备的开关（Windows 11 在 设置 → 辅助功能 → 视觉效果 → 动画效果，macOS 在 系统设置 → 辅助功能 里的「减弱动态效果」，iOS 在 设置 → 辅助功能 → 动态效果），浏览器把它暴露成 CSS 媒体查询 prefers-reduced-motion。caniuse 上它的全球支持率是 96.45%，Chrome 74、Firefox 63、Safari 10.1、Edge 79 起就有；剩下那几个百分点主要是 IE，所以对今天的访客可以按一定生效来写。满屏飘动的粒子正是这个开关最针对的那类动画，加一段 @media (prefers-reduced-motion: reduce) 把动画停掉，成本不到五行。
三、过了季节谁来关。纯 CSS 的那几款，摘掉一个 class 或删掉一个容器就干净了；Canvas 和 WebGL 的那几款，除了藏起画布还得把帧循环停掉，否则看不见的东西仍然在按屏幕刷新率一帧一帧地重绘。
第二组 · 下雨与雷雨
雨比雪难做。雪只要「飘」，雨要有速度感、要有落地的反馈，雷雨还要有明暗变化。这六款按「雨下在哪儿」排开。
07. 纯 SVG 的细雨蒙蒙
整个雨幕是矢量画出来的。作者的说法是，相比 Canvas 方案它在分辨率适应性上更好、性能开销更低——矢量那一点确实站得住，高分屏上不会糊；性能那一句你开着开发者工具看一眼帧率就知道适不适合自己的页面。
雨势很轻，适合博客、情绪板这类想要一点氛围又不想抢内容的页面。
08. 一滴水落下来，溅起水花
它不是满屏的雨，是单点特写：水滴在顶部积成形、落下、触地溅开，带光影变化，全程纯 CSS。
放整页背景上会显得空，但拿来做一个 loading、一个空状态插图、或者产品页里讲「防水」的那个小演示，比满屏雨合适得多。
09. 给任意一张图片盖一层雨
基于 GSAP 和 Canvas 的雨滴蒙层，叠在你自己的图片上面，原图就变成了「隔着一层雨看出去」的样子。
搜「雨天玻璃」的人多半要的是这个：不是天上在下雨，是你正隔着一块湿玻璃在看。首屏大图换季用它成本最低，图不用重拍。
10. 窗外在下雨，屋里有绿植和空调外机
这一款画了一整个室内场景——窗帘、窗户、空调外机、书架、绿植全是静物，加上窗外的雨。作者在详情页里点名了手法：这些物件和雨的动画都靠 background-image: repeating-linear-gradient、animation 和 keyframes 堆出来，没有用图片。
它更像一件 CSS 作品而不是可复用组件。想学纯 CSS 怎么画场景，源码值得读；想直接当背景用，它的构图是固定的，换内容会打架。
11. 同样是窗户，这次是暴雨
视角和上一款相同，天气换成电闪雷鸣加倾盆大雨，光影跟着闪电一起变，依然纯 CSS。上一款是安静的下午，这一款是有压迫感的——游戏官网、悬疑向的活动页用它，比通用粒子背景有辨识度。
12. 只要雷电的明暗变化
GSAP 驱动的雷电交加，重点不在雨丝而在整个画面忽明忽暗的那一下。
它是这一组里最容易嫁接到现有页面上的一款——主要改的是亮度，不需要你腾出一整块视觉空间。
第三组 · 真的用来显示天气的组件，外加一个零件
前面十二款是氛围，这一组是界面：有温度、有城市、有时间轴。共同的前提先说清楚——它们都只是前端界面，真实天气得你自己接一个气象接口填进去，不接就是一组写死的数字。
13. 一个组件，两种详略
简约和扩展两套形态，点一下切换：简约模式只给城市名、当前温度和天气状况；展开后补上风速、能见度、空气质量、湿度。切换瞬间温度数值会滑到其他数据旁边，这个过渡靠 CSS 的 transition 加 transform 做。
对侧边栏、后台首页这类寸土寸金的位置，「默认收起、想看再展开」比一次性铺开实际。
接数据时注意：扩展模式要的风速、能见度、空气质量、湿度四项，免费气象接口不一定都给，缺哪项就得把哪个格子藏掉。
14. 按小时铺开的一条天气线
以小时为维度展示天气变化，卡片背景跟着当前这一格的天气换成对应的动画。适合真有连续数据要展示的场景——出行、户外活动、农业、工地。
它对数据源的要求是这一组里最高的：你得拿得到逐小时的预报，只有「今日晴」这种一天一条的数据，它的时间轴会空掉一大半。
15. 鼠标一晃，卡片里的东西跟着动
卡片外观是 CSS 动画做的，鼠标移动时内部元素跟着偏移，偶尔有一道流星从卡片里划过，这部分靠 JS 事件驱动。作者标的适用场景是 App 移动端首页和锁屏页。
放网页上也成立，但它的交互是鼠标驱动的——触屏上那份「跟手」的感觉会丢掉一大半，而这一款的亮点恰恰就在那儿。
16. 会下雪的天气卡片
把第一组的雪装进了一张卡片：模糊背景图打底，太阳和月亮随时间平滑移动，云层缓缓飘过，雪一直在落。
这一组里氛围最重的一个，也是唯一一个把天气状态直接画成动效的。如果你要的正好是冬天，它比「卡片 + 雪花背景」两件事拼起来更整；要是还得覆盖晴天、雨天，它就只有一种天气可用。
17. 图标变了，背景跟着变
CSS 加 SVG 的天气状态切换：晴天黄背景、阴天灰背景，矢量图标和背景色一起联动。
它给的是一套「状态 → 画面」的对应关系，这恰恰是自己写天气模块时最费工的部分。当配色和图标的底稿用，比从零画一套省很多。
18. 顺手拿一个闪电图标
用 clip-path: polygon 切出闪电形状，配合 aspect-ratio 控制比例，弯曲度和颜色都能改。天气模块、充电状态、限时活动都要用到闪电，这种「一个元素 + 几个属性」的做法比为了一个图标塞进一整套字体图标库轻得多。
第四组 · 把「雨」当文字用
中文里「代码雨」「文字雨」也归在这个词底下，但它和天气没有关系——落下来的是字符。要是你真正想做的是标题字效而不是满屏背景，该看的是15 种网页标题与文字特效合集。
19. 《黑客帝国》那道绿瀑布
Canvas 实现的数字矩阵，文字内容、下落速度、颜色都可以改。把字符换成自己的品牌词或产品名，是这类效果最常见的用法。底色几乎必须是黑的，所以它基本只能用在深色页面或深色区块里。
20. 从云里落下来的发光字符
同样是矩阵雨，字符是从一朵云里落下来的，配渐变色和发光。相比上一款的纯绿，它离「电影复刻」远一点，离「装饰」近一点。
字符由随机的符号、字母和标点组成——它不追求可读，追求的是那一片光。真要在上面压标题文字，得自己再加一层遮罩压暗。
最后，按技术路线对一遍
| 做法 | 本文里是哪几款 | 什么时候别选它 |
|---|---|---|
| 纯 CSS | 01 02 03 06 08 10 11 17 18 | 想要上千片雪花的时候——每一片都是一个真实 DOM 节点 |
| SVG | 07（配合 CSS 的还有 17） | 要做大量随机粒子的时候，矢量的优势用不上，反而不如 Canvas 省事 |
| Canvas（多数配 GSAP） | 04 09 12 19 20 | 需要让粒子穿插在页面元素之间的时候，画布的层级不如 DOM 好安排 |
| WebGL | 05 | 用户里老设备和集显占比高的时候，它是本文最吃 GPU 的一款 |
| 组件型（要喂数据） | 13 14 15 16 | 你只想要氛围的时候——这几款不接气象接口就只是几个写死的数字 |
以上二十款可以在童哲网前端特效资源里逐个打开预览。季节氛围之外还想看别的整屏背景，14 款网页背景特效铺得更宽；本文第 05 款那种 WebGL 重型路线，14 款 Three.js 与 WebGL 网页 3D 特效里还有一批。
