返回赛题列表

赛博水墨

进阶

纯 CSS+JS 实现的动态水墨山水画,不使用任何图片资源,考察模型对中国传统美学的理解与代码艺术表现力。

规则说明

phase1:给出简短提示词,要求模型直接输出单文件 HTML
phase2:给出详细的视觉要求、动态效果要求和技术约束,要求模型根据这些要求输出单文件 HTML

Prompt
phase1:
创建一个纯 CSS+JS 的动态水墨山水画。不使用任何图片资源,要有水墨晕染效果和多层次景深(远山、近山、水面),配合云雾流动、水面波纹等持续动态效果。色调以黑灰白为主,可有淡青点缀。单文件 HTML,无外部依赖。
phase2:
创建一个纯 CSS+JS 的动态水墨山水画,单文件 HTML,无外部依赖。 **视觉要求:** 1. 不能使用任何图片资源,所有视觉效果必须纯代码实现 2. 要有水墨晕染效果——墨迹扩散、边缘模糊,模拟宣纸上墨水浸润的自然质感 3. 画面至少包含三个景深层次:远山(淡墨、朦胧)、近山(浓墨、轮廓清晰)、水面(倒影、波纹) 4. 整体色调为传统水墨风:以黑、灰、白为主色调,可以点缀淡淡的青色或赭石色,但不能喧宾夺主 **动态效果:** 5. 必须有持续的动态效果,让画面"活"起来——可以是以下任意组合: - 云雾在山间缓缓流动 - 水面泛起细微波纹 - 墨迹缓慢扩散或浓淡变化 - 远山若隐若现 6. 动画要舒缓自然,符合水墨画的意境,不能有突兀的跳变 **技术约束:** - 单文件 HTML,所有 CSS 和 JS 内联 - 不引入任何外部库、字体或图片 - 页面打开即全屏展示画面,无多余 UI 元素

Claude Opus 4.6 Extended Thinking

Anthropic · Claude.ai Web

简短提示词
1 次迭代2026-04-03
详细需求
1 次迭代2026-04-04

Claude Opus 4.7

Anthropic · 中转站API (X)

简短提示词
1 次迭代2026-05-06
详细需求
1 次迭代2026-05-06

Gemini 3.1 Pro Preview High Thinking

Google · Vertex AI Studio

简短提示词
1 次迭代2026-05-06
详细需求
1 次迭代2026-05-06

GPT 5.4 Pro Extended Thinking

OpenAI · ChatGPT Web

简短提示词
55m 31s1 次迭代2026-04-03
详细需求
48m 51s1 次迭代2026-04-03