视觉效果总览

除了交互组件（音乐球、彩纸、光效），主题还内置了以下视觉增强效果。

暗色模式光束边框

暗色模式下，代码块和上一页/下一页导航在鼠标悬浮时展示紫→青品牌色光束边框效果，灵感来自 border-beam。

效果特点

• 触发方式：鼠标悬浮时淡入显示，移出时平滑淡出
• 光束颜色：紫 #bd34fe → 青 #41d1ff（主题品牌色渐变）
• 旋转速度：3s 线性循环
• 色相偏移：12s 缓动循环 hue-rotate，光束颜色随时间微妙变化

双层架构

使用 CSS 伪元素实现双层视觉效果：

层	实现	作用
内发光	::before + 9 个 radial-gradient 品牌色色斑 + box-shadow: inset	光束在元素内侧产生柔和的边缘发光
描边+外晕	::after + conic-gradient 品牌色光束 + blur(4px)	可见的彩色光束线 + 柔和外发光

技术实现

• @property --beam-angle 注册可动画的 CSS 自定义角度属性
• conic-gradient(from var(--beam-angle), ...) 驱动光束旋转
• 9 个 radial-gradient 定位品牌色色斑在边框各处
• mask-composite: intersect, exclude 将效果限制在边框区域
• mask-composite: intersect, add 将内发光限制在边缘区域
• 仅暗黑模式（.dark 选择器）和悬浮（:hover）时激活

标题彩色下划线

h1-h4 标题各有不同颜色的下划线装饰：

标题	亮色	暗色
h1	#45abff 蓝	自动变暗
h2	#a29bdb 紫	自动变暗
h3	#8eb78b 绿	自动变暗
h4	#f3bad6 粉	自动变暗

暗色模式使用 hsl(from ... h s calc(l * 0.5)) 自动计算较暗的变体。

样式属性：

• 线宽：0.6em
• 样式：solid
• 偏移：-0.4em
• text-decoration-skip-ink: none

自定义滚动条

主题无关的半透明滚动条样式，亮色和暗色模式统一：

• 宽度：6px
• 轨道：transparent
• 滑块：rgba(128, 128, 128, 0.35)，圆角 3px
• 悬浮：rgba(128, 128, 128, 0.55)

代码块折叠

超过指定行数（默认 10 行）的代码块自动折叠，底部显示 CSS mask 淡出效果和展开按钮。点击展开后底部显示收起按钮。代码组（code-group）内的代码块不受影响。

• 通过 codeBlockFold 配置项控制，默认启用
• 使用 CSS mask-image 实现代码内容淡出，不遮挡光束边框效果
• 展开状态的按钮栏通过 position: absolute 定位，覆盖代码区域和行号区域

主题切换动画

使用 View Transition API 实现亮暗模式切换时的圆形扩散动画。

• 从切换按钮位置开始扩散
• 切换到暗色时：新内容（暗色）从按钮位置扩散覆盖
• 切换到亮色时：旧内容（暗色）从按钮位置收缩消失

实现方式：

• 通过 provide('toggle-appearance', ...) 覆盖默认切换行为
• 使用 document.startViewTransition() API
• ::view-transition-old(root) 和 ::view-transition-new(root) 控制动画层级

Hero 渐变

首页标题使用紫蓝渐变：

--vp-home-hero-name-background: linear-gradient(120deg, #bd34fe, #41d1ff);

Hero 图片背景使用 45° 双色背景：

--vp-home-hero-image-background-image: -webkit-linear-gradient(
  -45deg,
  #bd34fe 50%,
  #47caff 50%
);

暗色模式下 Hero 图片有 blur 呼吸动画。