本站是如何打造出这种独一无二的视觉体验的

很多小伙伴第一次访问本站时，都会被这种流光溢彩、如梦似幻的界面所吸引。
页面切换如丝般顺滑、卡片悬浮在毛玻璃之上、背景中流淌着极光般的星云……
这一切，究竟是怎么做到的？
本文将为你全面揭秘本站背后的技术栈与设计哲学。

🏗️ 技术全景

首先，让我们纵览本站所运用的全部核心技术：

没错，你没有看错 — 本站没有使用任何前端框架。没有 React，没有 Vue，没有 Tailwind。所有令人惊叹的效果，都是用最朴素的原生技术精心打磨而成。

🔮 一、玻璃拟态 — 让界面「悬浮」在光与影之间

相信很多小伙伴都注意到了：本站的每一张卡片、每一个面板，看起来都像是悬浮在一块半透明的毛玻璃之上，背后的星云色彩隐约透过，边缘还泛着一层精致的高光。

这就是 Glassmorphism（玻璃拟态） — 一种源自 Apple macOS / visionOS 的设计语言。

它的核心秘密在于 CSS 的 backdrop-filter 属性。我们对每张卡片施加了 30px 的高斯模糊和 120% 的饱和度增强，让卡片真正「穿透」到了背后的背景层。再加上顶部和左侧刻意加亮的边框模拟真实光照方向、叠加内外双层阴影制造深度感，最终形成了这种如同握在手中的全息玻璃一般的质感。

而且，这套玻璃效果完美适配深色与浅色双主题。整站所有颜色由一套 CSS 变量驱动，切换主题时所有元素同步平滑过渡。我们甚至还设计了独家的护眼暖色模式 — 深夜阅读时，整个界面化身为琥珀暖调，仿佛在壁炉旁翻阅一本旧书。

🌊 二、极光星云背景 — 不是 Canvas，是纯 CSS 的魔法

背景中那些缓缓流淌、相互融合的彩色星云，是本站最具辨识度的视觉特征。

很多人可能会以为这是 Canvas 或 WebGL 渲染出来的 — 但其实不是。它完全由纯 CSS 实现。

原理出乎意料地优雅：我们放置了 4 个巨大的半透明圆形色块（最大的横跨 80vw），分别着以赛博青蓝、霓虹粉红、深邃紫和湖水青四种颜色。然后，对它们的父容器施加了惊人的 120px 高斯模糊。

120px 的模糊有多强？它让所有色块的边界彻底消失，融合成了一片连绵不断的渐变星云。配合 22~35 秒不等的缓慢漂移动画，这些色块就像是太空中的极光星云一般，在你的屏幕背后静静地游曳、呼吸。

之所以选择纯 CSS 而非 Canvas/WebGL，正是为了极致的性能 — 零 JavaScript 开销，GPU 直接渲染，且在移动设备上也能流畅运行。

✈️ 三、View Transitions — 网站也能拥有 APP 级的转场动画

这是本站最令人印象深刻的技术亮点，也是绝大多数网站都还没有用上的前沿浏览器技术。

当你从首页点击一篇文章时，有没有注意到？页面并不是生硬地跳转，而是：旧页面优雅地向后缩小退去，新页面从下方浮现而出。文章的标题和封面图甚至会从列表中的位置飞入到文章页中的对应位置。

这就是 View Transitions API — Chrome 111+ 引入的跨文档转场标准。它让传统的多页面网站（MPA）第一次拥有了媲美原生 APP 和 SPA 单页应用的页面切换体验。

我们为每篇文章的标题和封面图都赋予了唯一的转场标识符。当页面切换时，浏览器会自动捕获旧页面元素的位置快照，并与新页面中同名元素进行位置、大小的插值动画。整个过程完全由浏览器原生驱动，60fps 满帧渲染。

为了让这份丝滑不打折扣，我们还做了大量幕后优化工作：

• 为转场元素开启 GPU 合成层加速
• 使用 CSS containment 布局隔离，杜绝转场时触发全局重排
• 通过 pagereveal 事件确保字体完全加载后才释放动画冻结帧
• 文章页的目录生成和代码高亮被延迟 600ms 执行，专门为转场动画让路

⚡ 四、Speculation Rules — 在你点击之前，页面已经准备好了

与 View Transitions 搭档的另一项前沿技术是 Speculation Rules API（预渲染规则）。

我们告诉浏览器：「请提前预渲染站内所有链接指向的页面」。于是，当你在浏览首页时，浏览器已经在后台悄悄地渲染好了你可能要访问的文章页面。

等到你真正点击时，页面已经 100% 就绪。View Transitions 动画瞬间启动，零加载等待。这就是为什么本站的页面切换感知速度远超普通网站 — 因为目标页面根本不需要临时加载。

🎯 五、自定义光标 — 每一次移动都是视觉享受

你可能已经发现，在桌面端访问本站时，传统的箭头光标消失了，取而代之的是一颗粉色光点和一个带有辉光的蓝色光环。

这颗光点零延迟跟随你的鼠标，而光环则以 0.45 的插值因子产生优雅的"惯性拖尾"。当你悬停在链接或按钮上时，光环会膨胀、变色、发光；当你按下时，光环急剧缩小，产生触感清晰的"按压反馈"。

整个光标系统通过 requestAnimationFrame 以 60fps 驱动，确保即便在快速移动时也始终丝滑。

🌀 六、Lenis 惯性滚动 + 全页吸附

默认的浏览器滚动行为是"线性急停"的 — 手指离开触控板或松开滚轮的瞬间，滚动戛然而止。本站引入了 Lenis.js 来赋予页面苹果级的惯性滚动体验：松开手后，页面还会带着一丝丝优雅的惯性继续滑行，然后丝滑地停下。

更有趣的是首页的全页吸附滚动系统。在 Hero 区域，普通的滚动被完全劫持。每次滚轮触发，页面便精准地跳转到下一个屏幕：

首屏 Hero → 站长精选 → 系统推荐 → 文章列表

到达文章列表区后，吸附解锁，恢复自由的惯性滚动。这种"先引导、后释放"的交互逻辑，让用户像翻阅杂志一样浏览你的博客。

🃏 七、3D 悬浮卡片 — 跟随手指的微观宇宙

每一张玻璃卡片都不是平面的。当你将鼠标移过卡片表面时，它会根据光标在卡片中的相对位置，实时产生 ±8° 的 3D 倾斜。

这创造了一种"卡片悬浮在桌面上方，你的手指正从不同角度审视它"的沉浸感。配合按下时的缩小弹性（0.95）和松开时的放大回弹（1.02），每张卡片都仿佛有了重量和质感。

考虑到移动设备的性能限制，3D 效果在手机端自动禁用，同时提供了一键开关供用户自由选择。

📖 八、流式入场动画 — 让内容「活」过来

本站的文章列表不是打开页面就全部呈现的。当你向下滚动时，每篇文章卡片会在即将进入视口的瞬间，优雅地从右侧滑入、淡入、微微放大，然后稳稳地落在它应在的位置上。

这套流式懒加载入场系统由 IntersectionObserver 驱动。浏览器精确感知每个元素何时进入可视区域，然后逐一触发动画。这不仅好看，更是一种性能优化 — 视口之外的元素保持隐藏状态，不占用任何渲染资源。

同样的技术还应用于图片懒加载：文章封面图和精选卡片的背景图，都是在即将进入视口时才开始加载，大幅节省了首屏的带宽开销。

🔤 九、MiSans 字体 — 为阅读体验量身定制

本站全局使用小米开源的 MiSans 字体。之所以选择它，是因为 MiSans 天然为屏幕阅读优化，在各种字号和字重下都保持极高的清晰度和舒适的视觉节奏。

为了不让字体拖慢页面加载速度，我们采用了激进的优化策略：

• 使用 WOFF2 格式，比传统 TTF 文件小约 30%
• 将 6 个字重合并为 3 个文件，大幅减少网络请求
• 对标题和正文字重执行 <link rel="preload"> 预加载，确保首次渲染时字体已就绪
• 使用 font-display: swap 避免字体加载期间的文字隐形

🎬 十、动效哲学 — 统一的贝塞尔曲线语言

细心的你可能会发现，本站所有动画都有一种相似的「手感」— 快速启动、柔和减速、恰到好处地停止。

这是因为全站动画统一使用了两条精心调校的贝塞尔曲线：

• cubic-bezier(0.2, 0.8, 0.2, 1) — 主力曲线，灵感来自 Apple 的阻尼回弹，用于所有页面过渡和交互
• cubic-bezier(0.34, 1.56, 0.64, 1) — 弹性曲线，略微过冲后稳定，用于弹窗和按钮

这种统一的动效语言，让整个网站的交互都遵循同一套物理直觉。用户虽然说不出原因，但会本能地觉得"这个网站很顺滑、很高级"。

📊 性能优化全景

"好看"和"快"从来不矛盾。本站在视觉极致的同时，同样追求极致的性能表现：

🏛️ 架构一览

              ┌─── Halo 2.x (Spring Boot) ───┐
              │        Thymeleaf 直出          │
              └───────────┬───────────────────┘
                          │
          ┌───────────────┼───────────────┐
          │               │               │
      CSS 层           JS 层          浏览器 API
          │               │               │
    fonts.css         core.js       View Transitions
    base.css         index.js      Speculation Rules
    layout.css      article.js    IntersectionObserver
  components.css     Lenis.js      requestAnimationFrame
   pages/*.css    highlight.js

整体架构简洁而强大。CSS 层负责所有视觉呈现，JS 层驱动交互逻辑，而浏览器前沿 API 则提供了 SPA 级的用户体验 — 三者各司其职，却又紧密协作。

🏁 写在最后

"真正的技术优雅，不是用更多的框架和工具堆砌出来的，而是用最少的依赖，创造最极致的体验。"

本站证明了一件事：即使不借助任何前端框架，仅凭原生技术的深度运用和对细节的极致追求，同样可以打造出令人惊艳的 Web 体验。

每一个 0.35 秒的转场、每一条抛物线轨迹的光标跟随、每一帧星云的微妙偏移 — 背后都是对浏览器渲染管线的深刻理解，和对用户感知的精细把控。

这，就是我们对"好看"的定义。