返回赛题列表
赛博废土面馆
进阶为 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 实现
- 页面要有基本的响应式适配(手机上也能看)