墨汁扩散背景动效

2026-05-26 · 主题, 动效, 配置

墨汁扩散背景动效

inkpaper 主题内置了 6 种墨汁缓慢扩散晕染的背景动效，所有方案均为缓慢扩散、越散越淡直至消失的效果。墨滴中心只出现在页面两侧（正文区域之外），不干扰阅读。

可选方案

方案 1inkDrop

水墨滴落渗透

墨滴从中心向外缓慢渗透扩散，边缘不规则如纤维渗透。出现频率低，沉静悠然。

方案 2fiberBleed

宣纸纤维渗透

淡墨底色配合从边缘向外延伸的不规则纤维丝，模拟墨汁沿宣纸纤维方向扩散。

方案 3splash

泼墨飞溅

主墨团与周围细密墨点同时出现，然后各自缓慢扩散消散。重叠部分图形融合不叠加颜色。

方案 4waterCloud

墨汁入水扩散

淡墨云团缓慢膨胀扩散，如墨汁滴入清水般柔和飘逸。出现频率低，氤氲朦胧。

方案 5bleedEdge

墨迹洇开

墨迹整体边界平滑地缓慢向外洇开推进，浓度均匀递减。边缘柔和自然，无突兀中心。

方案 6layeredInk

积墨层染

多层薄墨依次扩散叠加，每层扩散后渐淡，短暂形成浓淡层次后整体消退。

配置方法

VitePress

在 .vitepress/config.mts 中配置：

export default defineConfig({
  themeConfig: {
    inkEffect: 'bleedEdge',       // 效果名称，不配置或空字符串则不启用
    inkEffectOpacity: 0.5         // 可选，整体不透明度叠加系数，默认 1
  }
})

Astro

在 astro.config.mjs 中配置：

export default defineConfig({
  integrations: [
    inkpaper({
      inkEffect: 'bleedEdge',     // 效果名称，不配置或空字符串则不启用
      inkEffectOpacity: 0.5       // 可选，整体不透明度叠加系数，默认 1
    })
  ]
})

设为空字符串或不配置则不启用动效。默认不启用。