返回赛题列表
赛博水墨
进阶纯 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 元素
Gemini 3.1 Pro Preview High Thinking
Google · Vertex AI Studio