返回赛题列表

赛博废土面馆

进阶

为 2077 年夜之城底层的一家拉面摊写个数字菜单——霓虹灯发光、CRT 扫描线、Glitch 文字闪烁,菜名自由发挥。

规则说明

单 Phase 挑战。给出赛博朋克拉面摊的场景设定和必须包含的三种视觉特效(霓虹灯、CRT 扫描线、Glitch 文字),菜名和价格由模型自由发挥,考察视觉氛围营造能力和文案创意。

Prompt
Prompt
请直接输出一个完整可运行的**单文件 HTML**(内联 CSS + 原生 JS,不要使用 JSX 或任何需要编译的语法)。 --- **场景设定:** 2077 年,夜之城(Night City)底层第 7 区的一条窄巷里,有一家只有 4 个座位的拉面摊。老板是个装了义眼的退役军人,菜单显示在吧台上方一块破旧的全息屏幕上。你的任务是做出这块数字菜单。 **必须包含的视觉特效:** 1. **霓虹灯发光**:菜单标题和价格用霓虹灯风格呈现——多层 `text-shadow` 叠加出辉光扩散效果,颜色以赛博朋克经典的品红(magenta)、青色(cyan)、电紫为主。霓虹灯要有微弱的闪烁/呼吸感,像真实霓虹管那样偶尔不稳定 2. **CRT 扫描线**:整个页面要覆盖一层 CRT 显示器的扫描线效果——用 `repeating-linear-gradient` 做出细密的水平条纹,模拟老式阴极射线管屏幕的质感。可以加上轻微的屏幕曲面变形(`border-radius` 或 CSS 滤镜模拟) 3. **Glitch 文字故障**:菜名文字要有随机触发的故障(Glitch)效果——用 `clip-path` 切割 + 位移 + 色彩通道分离(RGB shift)模拟信号干扰。故障不是一直发生,而是间歇性随机触发,像信号不好的屏幕 **菜单内容要求:** - 至少 5 道菜品,菜名请自由发挥,要有赛博朋克世界观的幽默感和想象力(比如"义体修复特供豚骨面"、"黑市数据酱油拉面"之类) - 每道菜要有价格(用虚构货币单位,如 €$、eddies、credits 等) - 可以加一些小细节:推荐标记、售罄标记、"老板推荐"角标等 **氛围要求:** - 整体色调偏暗,背景深色(深灰/近黑),让霓虹色彩在暗底上"发光" - 可以加一些环境细节:角落的水渍纹理、屏幕边缘的磨损、偶尔闪过的广告弹窗等 - 字体选择要有"未来废土感"——等宽字体、像素字体、或粗体无衬线都可以(用系统字体或 Google Fonts CDN) **技术约束:** - 不允许使用任何外部图片资源(允许内嵌 base64) - 所有视觉效果必须用纯 CSS + JS 实现 - 页面要有基本的响应式适配(手机上也能看)

Claude Haiku 4.5

Anthropic · Blink New

标准 Prompt
1 次迭代

Claude Opus 4.7

Anthropic · Stilla AI Web Chat

标准 Prompt
1 次迭代

Claude Sonnet 4.6

Anthropic · Blink New

标准 Prompt
1 次迭代

Gemini 3.1 Pro Preview High Thinking

Google · Vertex AI Studio

标准 Prompt
1 次迭代

GPT 5.4

OpenAI · 中转站API (B)

标准 Prompt
1 次迭代

GPT 5.5

OpenAI · 中转站API (B)

标准 Prompt
1 次迭代

GLM 5.1

ZhipuAI · GLM Coding Plan API

标准 Prompt
1 次迭代