蒸汽波
Vaporwave
别名:蒸汽波蒸汽波风格粉紫蓝复古未来霓虹网格地平线80年代商场美学vaporwavesynthwave UIretro mall aesthetic
这是什么
用霓虹粉紫青、透视网格地平线、镀铬 3D 字与棕榈树剪影表示「消费主义怀旧」的视觉语言。 拼贴 80-90 年代商场、早期 CGI 与故障信号，甜腻、迷幻、又带着空洞的乐观。
开发规格
字体
镀铬渐变展示字 + 宽字距无衬线
色彩
粉 #FF71CE × 青 #01CDFE × 紫 #B967FF
边框
1px 霓虹描边，胶囊与直角混用
阴影
多层同色霓虹光晕
间距
地平线居中对称，元素悬浮网格上
动效
300–400ms 的霓虹渐亮与地平线滑动，尊重 prefers-reduced-motion
状态反馈
hover 增强多层霓虹光晕；focus 用青色可见亮环；active 压低饱和；disabled 去光降透明；error 用粉红霓虹
风格演示
先看整页效果，再试交互场景整页预览
WELCOME TO
THE MALL
消费主义的夏日永不落幕。
GRID FOREVER. SUNSET NEVER ENDS.
步入中庭 →透视无限远
液态金属
招牌色
交互场景
正在加载演示…
✓ 适用场景
- 音乐、夜店、潮牌、复古主题活动，风格即情绪
- 需要强烈亚文化信号与迷幻氛围的营销页
- 播放器、票券、虚拟商品等娱乐向界面
✕ 不适用场景
- 金融、医疗、政务等需要冷静可信的界面
- 长文阅读与表单录入，霓虹与闪烁持续消耗注意力
- 无障碍要求高的场景，粉紫青对比度与闪烁都有风险
常见形式
商场软调
Mall soft
粉彩大理石、希腊柱与 Windows 95 窗口，甜而空
霓虹故障
Neon glitch
粉青霓虹 + RGB 错位与扫描线，信号不稳
全息镀铬
Holographic chrome
液态金属 3D 字与 CD 幻彩反光
实现要点
linear-gradient 粉紫青perspective + rotateX 网格地平线background-clip: text 镀铬字text-shadow 多层霓虹repeating-linear-gradient 扫描线地平线网格是招牌：一个 perspective 容器里放 rotateX(70deg) 的 repeating-linear-gradient 网格 平面，底部渐隐。镀铬字用多段灰阶或粉青渐变 + background-clip: text + 深色描边。 霓虹用 text-shadow 多层同色扩散，色相锁粉 #FF71CE 青 #01CDFE 紫 #B967FF。棕榈树与希腊柱当剪影贴 1～2 处。故障动画短促低频，尊重 prefers-reduced-motion。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中实现 Vaporwave 蒸汽波视觉风格。 先检查现有主题与动效体系，蒸汽波色板与效果做独立作用域。 要求： - 粉紫青霓虹色板 + 透视网格地平线 + 镀铬标题字 - 棕榈树/罗马柱剪影点缀控制在 1～2 处 - 扫描线 opacity ≤ 0.06，故障动画短促低频并尊重 prefers-reduced-motion - 关键正文对比度达标，霓虹只做点缀 - 深色为主，浅色「商场软调」作为变体 - 不新增任何依赖 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
复刻千禧年前后数码乐观主义的视觉语言：镀铬液态金属、iMac 糖果半透明塑料、 气泡字与闪光星形、粉紫蓝渐变配银白高光。它混合了对未来的天真想象与低分辨率 3D 的笨拙质感，甜腻、闪亮、毫不克制。
风格相似概念"High tech, low life" 的视觉语言：近黑的深底上，霓虹青与品红发光描边切割 界面，等宽字体与终端符号贯穿，扫描线 故障位移 毛刺纹理营造信息系统过载 的压抑未来感。光是从黑暗里切出来的，界面像一台被劫持的显示器。
风格相似概念"过去的人想象中的未来"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。
风格相似概念反功能主义的后现代视觉语言：波浪线 圆点 锯齿 斑点等天真涂鸦元素，与高饱和 撞色、黑色粗描边一起铺满画面，故意打破网格与秩序。它拥抱廉价与热闹，用 "丑得快乐"对抗优雅的现代主义。
风格相似概念用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件影响组件用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件