从零构建一个赛博朋克UI系统

赛博朋克美学从来不是简单的"霓虹色+故障字"。它是一种对未来既迷恋又警惕的态度——科技高度发达却锈迹斑斑，信息过载却人人孤独。本文我会带你用纯原生 HTML/CSS/JS 复刻一套完整的赛博朋克 UI，不依赖任何框架。

"The sky above the port was the color of television, tuned to a dead channel." —— William Gibson

一、视觉基石：深色宇宙与CRT滤镜

赛博朋克的背景永远不是纯黑。纯黑会让画面"死"掉。我们需要的是一种 #0a0a12 级别的深空蓝紫——它暗示着屏幕背后依然有微弱电流在流动。

然后是三层叠加强化"屏幕感"：

扫描线：3px 周期的重复线性渐变，模拟老式CRT的行扫描
暗角：径向渐变遮罩，让中心明亮、边缘隐入黑暗
粒子星空：Canvas绘制数百颗缓慢漂移的星点，鼠标附近自动连线

/* CRT 扫描线核心 */
.scanlines {
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 3px
  );
  mix-blend-mode: multiply;
}css

二、故障艺术：Glitch Text 的魔法

故障文字（Glitch）的本质是 色偏 + 错位裁切。利用 CSS 伪元素复制两份文字，分别染成青色和品红，再通过 clip-path 裁切上下半区，最后让它们在X轴上做随机偏移。

核心实现思路

我们不需要任何 JavaScript 去逐帧绘制。CSS 动画足够：定义两个关键帧，在 92%/94%/96% 的时间点做微小位移，就能营造出"偶尔跳一下"的电子干扰感。

.glitch::before {
  content: attr(data-text);
  color: var(--primary);    /* 青色偏移层 */
  animation: glitch-1 3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.glitch::after {
  color: var(--secondary);  /* 品红偏移层 */
  animation: glitch-2 3s infinite;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}css

三、终端美学：打字机与等宽字体

终端是程序员最浪漫的界面。一个会"打字"的终端 Hero 区远比一张大图更有辨识度。

打字机效果的实现非常朴素：维护一个字符索引，每隔 50-100ms 把当前字符追加到容器末尾，遇到 output 类型直接一次性输出（模拟终端瞬间打印），遇到 wait 则插入停顿。

💡 小技巧：在字符间隔里加入一点随机延迟（比如 50 + Math.random()*50 ms），会让打字看起来更"像人"。机械均匀反而很假。

四、3D 磁贴卡片

当用户把鼠标移到卡片上，卡片应该像被鼠标"推开"一样轻微倾斜，并伴随高光边框。关键API是 perspective + rotateX/Y。

监听 mousemove 获取鼠标在卡片内部的相对位置
映射到 -8° ~ 8° 的旋转角
同时用一个径向渐变的光圈跟随鼠标，制造"灯光扫过"的效果
鼠标离开时用 transition 平滑回正

五、彩蛋：Konami Code

打开你的控制台看看，每个赛博网站都该有个彩蛋。试试在键盘上输入：

↑ ↑ ↓ ↓ ← → ← → B A

你会回来感谢我的。

结语

好的 UI 是"会呼吸"的。它不一定要用最先进的框架，但一定要在每一个微交互里藏着设计者的小心思。扫描线、闪烁的光标、微微倾斜的卡片、鼠标拖尾的光粒——这些细节加在一起，才让一个网站有了"灵魂"。

希望这篇文章能启发你做出属于自己的赛博空间。Stay curious, stay cyber. ⬢