WebSocket实现气象背景的核心是将温度、云量等数据自然映射为CSS变量、Canvas粒子或Three.js视觉变化，需自建Node.js中转服务，前端动态更新样式与动画。
用 WebSocket 实现网页动态气象背景，核心是让前端实时接收气象数据（如温度、湿度、云量、降水概率、风速等），再根据这些数值驱动 CSS 动画、Canvas 绘图或 Three.js 场景变化。关键不在“连上 WebSocket”，而在于“如何把数据自然映射成视觉反馈”。
建立稳定可靠的气象数据 WebSocket 连接
多数公开气象 API（如 Open-Meteo、WeatherAPI）不直接提供 WebSocket 流，需自行搭建中转服务。推荐用 Node.js + ws 库搭建轻量代理：
- 后端定时调用 REST 气象接口（例如每 60 秒拉取一次城市实况+短临预报）
- 将结构化数据（如
{"temp": 23.4, "clouds": 78, "rain_prob": 15, "wind": 3.2}）通过 WebSocket 广播给所有已连接的前端 - 前端使用原生
WebSocket对象连接，并监听message事件解析 JSON 数据 - 务必添加重连逻辑（网络中断后自动尝试 reconnect），并设置心跳检测防止意外断连
用数据驱动 CSS 变量与渐变背景动画
适合轻量级、高性能的视觉反馈。例如：温度决定主色调，云量控制模糊度与不透明度，降水概率触发雨滴伪元素动画。
- 在
:root中定义可变 CSS 自定义属性：--bg-hue: 210; --cloud-opacity: 0.6; --rain-intensity: 0; - 收到新数据后，用 JavaScript 动态更新这些变量：
document.documentElement.style.setProperty('--bg-hue', mapTempToHue(data.temp)); - 背景使用
linear-gradient+hsl()配合变量实现冷暖过渡；云层用多层box-shadow或伪元素叠加，opacity 绑定--cloud-opacity - 下雨效果可用绝对定位的
::before伪元素生成数百个细长条，通过animation控制下落速度与频率，其animation-duration和opacity由--rain-intensity控制
用 Canvas 实时绘制气象粒子系统
比 CSS 更灵活，适合表现风向流动、云团飘移、雷暴闪烁等复杂动态。
立即学习“前端免费学习笔记（深入）”；
- 创建全屏
<canvas></canvas>，设为 fixed 定位置于 body 底层 - 根据气象数据初始化粒子：风速决定粒子运动矢量长度，风向角决定方向，云量决定粒子密度，温度影响粒子颜色饱和度
- 每帧（
requestAnimationFrame）更新粒子位置、大小、透明度，并做边界处理（如从右进左出模拟风动） - 雷电效果可随机触发：短暂清空画布局部区域 + 白色强光脉冲 + 低频闪烁衰减，持续时间与
data.thunder_prob正相关
结合地理坐标做空间化视觉映射（进阶）
若获取用户地理位置（navigator.geolocation），可让背景呈现“本地真实天象”的空间感。
- 用太阳高度角公式（含纬度、日期、当前时间）计算实时太阳位置，驱动光源方向与光影角度
- 将云层 Canvas 粒子按方位角分布：西边云更厚（日落时），东边渐薄；配合
transform: skewX()模拟透视压缩 - 夜间模式自动启用：当太阳高度 noise 函数生成微弱银河纹理
- 注意权限引导——首次访问需用户授权定位，失败时降级为默认城市数据
不复杂但容易忽略的是数据节奏与视觉节奏的匹配：气象数据更新慢（分钟级），但动画必须保持 60fps 流畅。解决方案是用缓动插值平滑过渡数值变化，而非突变。视觉不是数据仪表盘，而是数据的情绪翻译。
