返回赛题列表
天气卡片
进阶以 iOS 18 设计语言制作的横板天气页面，包含晴天、大风、暴雨、暴雪四张动画天气卡片。考察模型对苹果设计风格的理解、CSS 动画功力以及视觉氛围营造能力。原题灵感来源linux.do论坛，对于原提示词有修改。
规则说明▼
phase1：禁止依赖任何外部资源（字体、图标库、框架、CDN、API），纯单文件自包含，仅使用最基础的 HTML、CSS 和 JavaScript
phase2：在 phase1 基础上给出更精确的设计与交互要求，并允许使用外部资源（Google Fonts、图标库、CDN 等）
Prompt▼
phase1：▼
你是 Apple Inc 的 UI 设计师，以 iOS 18 的设计风格做一个带有动画效果的天气卡片页面。
横板布局，一行展示 4 张天气卡片：晴天、大风、暴雨、暴雪。
禁止依赖任何外部资源——不要引用外部字体、图标库、CSS 框架、JS 库、CDN 或 API。
请直接输出一个完整可运行的单文件 HTML（内联 CSS 和原生 JavaScript）。
phase2：▼
你是 Apple Inc 的资深 UI 设计师，以 iOS 18 的设计风格制作一个精致的天气卡片展示页面。
页面要求：
1. 横板布局，一行展示 4 张天气卡片：晴天、大风、暴雨、暴雪
2. 每张卡片需包含：精美的天气动画图标、当前温度、体感温度、天气名称、简短天气描述、风力/湿度等辅助信息
3. 每种天气必须有沉浸式的动态动画效果：
- 晴天：平滑旋转的光晕、缓缓漂浮的云朵、温暖的金色粒子
- 大风：剧烈摆动的树叶/线条、方向感强的粒子流、卡片本身的轻微晃动
- 暴雨：密集的雨滴下落（有透视近大远小）、闪电随机闪烁、水面涟漪
- 暴雪：自然飘落的雪花（大小不一、旋转、速度随机）、地面积雪渐增、雾气弥漫
4. 整体风格严格遵循 iOS 18 设计语言：
- backdrop-filter 磨砂玻璃效果
- 大圆角卡片（20px+）
- 柔和的多层渐变背景（每张卡片背景色应与天气氛围呼应）
- SF Pro 或等效的现代无衬线字体
- 精致的光影层次和微妙的边框高光
5. 交互效果：
- 悬浮时卡片轻微上浮并增强阴影
- 点击卡片展开更多天气详情（平滑过渡动画）
- 卡片间切换时有流畅的过渡效果
6. 响应式布局：桌面端一行四列，平板端两列，手机端单列纵向排列
7. 页面背景应有微妙的渐变或粒子动画，整体氛围高级而不杂乱
请直接输出一个完整可运行的单文件 HTML。
可以使用外部字体（如 Google Fonts 的 SF Pro 替代字体）、图标库、CSS 框架、CDN 资源。