子比主题美化教程：灵动漂浮气泡特效美化教程

这款子比专属漂浮气泡特效，轻量 Canvas 绘制不卡速，无外部依赖、全端适配。支持小中大三种尺寸切换 + 一键关闭，选中状态本地记忆，新手复制粘贴即可一键安装，还能自定义配色和参数，轻松给站点添灵动氛围感！

效果预览

代码部署

步骤 1：进入子比主题自定义代码界面

1. 登录你的 WordPress 后台；
2. 依次点击「主题设置」→「全局功能」→「自定义代码」→「自定义底部HTML代码」输入框；

将下方全部代码直接粘贴到「自定义底部HTML代码」输入框中。

步骤 2：保存设置并预览效果

1. 粘贴完成后，保存所有设置；
2. 打开你的网站前端页面，即可看到左侧的绿色气泡控制按钮，气泡已开始漂浮；
3. 鼠标移到按钮上会有放大、发光效果，点击按钮会弹出模式选择菜单，选择对应选项即可切换气泡效果。

自定义修改教程

如果想根据自己的网站风格调整特效，可修改代码中的以下参数，无需懂复杂的 JS，直接改数值即可：

1. 修改气泡配色

找到 JS 中的颜色池数组，替换成自己喜欢的颜色（支持 16 进制、RGB、RGBA）：

// 原配色
const colors = ['#3399ff', '#52c41a', '#8777ef', '#ff6688'];
// 自定义示例（换成蓝、粉、紫）
const colors = ['#1890ff', '#ff7a9c', '#722ed1'];

2. 调整气泡数量 / 尺寸 / 速度

找到 JS 中的bubbleConfig 配置对象，修改对应数值即可（数值越大，效果越明显）：

const bubbleConfig = {
  0: { num: 0, size: 10, speed: 0.5 },    // 关闭：无需修改
  1: { num: 30, size: 15, speed: 0.6 },   // 小气泡：num=数量，size=基础尺寸，speed=上升速度
  2: { num: 60, size: 25, speed: 1.0 },   // 中气泡：可按需减小/增大数值
  3: { num: 80, size: 35, speed: 1.2 }    // 大气泡：数值越大，气泡越多/越大/越快
};

3. 修改控制按钮位置

找到 HTML 中#zib-bubble-wrapper的行内样式，修改left（左间距）和top（上间距）：

<!-- 原位置：左20px，上160px -->
<div id="zib-bubble-wrapper" style="position: fixed; left: 20px; top: 160px; ...">
<!-- 自定义示例：右20px（将left改为right），上200px -->
<div id="zib-bubble-wrapper" style="position: fixed; right: 20px; top: 200px; ...">

4. 修改按钮主色调

将代码中所有的#52c41a替换成自己的网站主色调（16 进制颜色），包括行内样式、CSS、JS 中的颜色值，即可整体更换按钮和高亮的配色。

总结

这款漂浮气泡特效兼顾了视觉效果和交互体验，全程无依赖、易安装、可自定义，新手也能一键添加。只需简单三步，就能让你的子比主题站点更具灵动性，告别单调的静态页面，提升访客的视觉体验。