情绪天气明信片

设计一个"情绪天气明信片"页面。 页面布局参考一张实体明信片：画面中央是一张比例约 3:2 的横版明信片卡片，卡片即天气图景的"取景窗"，外面留白处放置控制器与说明文字，整体像是放在桌面上、刚从远方寄回的一张卡片。 **输入区（在明信片下方或侧边）**： 提供 3–4 个描述用户当下状态的滑块，每个滑块两端是一组对立的描述，例如： - 能量值：耗尽 ↔ 充沛 - 心情：阴郁 ↔ 明朗 - 思绪：杂乱 ↔ 清晰 - 温度感：清冷 ↔ 温暖 具体维度命名可以由你设计，允许并建议自由发挥滑块的维度，但要保证每个滑块都能对最终的天气图景产生**可感知的、有逻辑的**视觉变化，而不是几个无关紧要的装饰旋钮。 滑块的维度命名应当符合直觉，易于理解，不要过于晦涩难懂。 **明信片正面（核心视觉区）**： 根据滑块的组合实时生成一幅天气图景，图景必须是**会动的**，不是一张静态贴图。可能出现的天气场景例如： - 薄雾中透着光的清晨 - 午后的雷阵雨 - 风很大的多云黄昏 - 无风的夜晚星空 - 一场安静的细雪 - 雨过初晴的彩虹 - 将晚未晚的橙色火烧云 天气元素（云、雨、雪、阳光、风、星辰、雾气、光晕等）应当用 CSS 动画 / Canvas / SVG 实现，避免依赖外部图片素材。要求至少 5 种以上明显不同的天气状态可被滑块组合触发，相邻状态之间应有自然的过渡，而不是硬切换。 **明信片元素的细节**： - 卡片有轻微的厚度感和边缘阴影，像真实的明信片 - 右上角可以有一枚邮票（图案与当前天气呼应）和一个邮戳（写着"今日"或当前日期） - 卡片的某个角落用手写感字体写着一句**像天气预报播报员说的"今日情绪预报"**——例如"局部多云，午后转晴，建议给自己泡杯热茶"，文案要根据滑块状态实时变化，至少覆盖 8 种以上不同的播报模板 **整体氛围**： - 温柔、克制、有质感，像精心设计的纸质明信片，而不是花哨的天气 App 截图 - 配色考究，避免廉价饱和色或AI常用的蓝紫配色；滤镜整体可以略带胶片颗粒感或纸张纹理 - 字体使用网页字体（Google Fonts 等），中英文搭配要协调 - 明信片之外的留白区域同样需要设计（不是默认白底），让整个页面看起来像一张被摆在桌面/木纹/麻布上的照片 **技术要求**： - 输出一个完整可运行的单文件 HTML，桌面浏览器 1280×800 以上全屏展示，手机浏览器 100% 展示 - 允许通过 CDN 引入网页字体和开源库（如 GSAP、anime.js 等） - 滑块拖动时的视觉响应必须流畅（≥ 30fps），不能在每次拖动都做整页重绘导致卡顿 - 所有图像元素用代码生成，禁止外链 jpg/png/webp 图片素材；SVG 内联或代码绘制是允许的