蒸汽波按钮需多层视觉叠加实现：低饱和渐变、透视畸变、复古字体（如VCR OSD Mono）、CRT辉光text-shadow、三层box-shadow、跳帧式hover动画及扫描线背景。
蒸汽波（Vaporwave）风格按钮不是靠单一 CSS 属性实现的，它依赖于多重视觉层叠：低饱和渐变、轻微透视畸变、80年代字体、半透明叠加和刻意“过时”的动画节奏。直接套用 background: linear-gradient 或加个 filter: blur(1px) 会显得廉价且失真。
用 @font-face 加载复古无衬线字体，别依赖系统字体
Windows 的 Arial、macOS 的 Helvetica 太干净，缺乏蒸汽波需要的“扫描线感”和轻微字重不均。必须嵌入如 Bank Gothic、ITC Avant Garde 或开源替代品 VCR OSD Mono：
- 从 Google Fonts 搜索不到真正匹配的字体，建议用 VCR OSD Mono（免费、等宽、带像素边缘）
-
@font-face中声明font-weight: normal和font-style: normal必须显式写出，否则 Safari 可能忽略 - 字体加载后需配合
text-shadow: 0 0 4px rgba(255,0,255,0.6)模拟 CRT 显示器的辉光，不能只靠颜色
box-shadow 要分三层模拟霓虹灯管效果
单层阴影无法表现蒸汽波常见的“内发光→外晕染→虚边”结构。正确做法是用逗号分隔三层 box-shadow：
box-shadow: 0 0 8px #ff00cc, 0 0 16px rgba(255, 0, 204, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.1);
注意：inset 层必须放在最后，否则会被覆盖；中间层用半透明白色或浅紫会削弱荧光感，应始终用主色的弱化 rgba 版本。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
hover 动画必须禁用 transform: scale()，改用位移 + 闪烁
蒸汽波排斥平滑缩放——那是现代 UI 的逻辑。真实效果是按钮轻微“跳帧”式抖动，配合文字闪烁：
- 用
translateY(-2px)替代scale(1.05)，位移值不超过 ±3px - 添加
opacity在 0.92 → 1.0 → 0.92 之间跳变，持续时间设为0.24s（刻意避开标准 0.2s / 0.3s） - 禁止使用
transition-timing-function: ease，全部用steps(2, jump-none)模拟老电视帧率
最容易被忽略的是背景层：按钮本身再还原，若页面背景是纯白或纯灰，蒸汽波氛围立刻瓦解。至少要叠加一层 repeating-linear-gradient 做扫描线纹理，或用 background-blend-mode: overlay 混合渐变与噪点图。没有这个底，所有按钮细节都浮在空中。
