智能摘要

文章列表页还在用静态背景？试试用3D粒子风暴让访客眼前一亮

当用户打开你的网站，文章列表页往往是他们停留的第一站。一个平平无奇的列表页，很难让人产生继续浏览的欲望。想象一下：页面背景中，蓝紫色的粒子如银河般旋转流动，当你把鼠标悬停在一篇文章标题上时，周围粒子瞬间向该区域汇聚，仿佛被黑洞吞噬——这种科幻感十足的交互体验，能瞬间抓住访客的注意力。

本教程将带你一步步在子比Zibll主题中实现动态3D粒子银河风暴，配合鼠标悬停时的引力聚焦黑洞吞噬特效，让你的网站瞬间拥有赛博朋克般的视觉冲击力。整个过程不需要修改核心文件，升级主题时也不会被覆盖。

一张子比Zibll主题文章列表页的截图，页面背景中呈现动态3D粒子银河风暴效果，粒子为蓝紫色调，呈螺旋状分布，中央有黑洞吞噬特效，鼠标悬停在某篇文章标题上时，周围粒子向该区域汇聚。风格：赛博朋克+科幻。色调：蓝紫为主，辅以金色高光。构图：居中对称，列表在左侧，粒子特效覆盖全屏。

开始前需要准备什么？

动手之前，先确认你的环境满足以下条件：

子比Zibll主题：已安装并激活最新版本（7.0及以上），确保自定义功能可用
WordPress系统：版本5.8+，推荐6.0+以获得最佳兼容性
代码编辑器：VS Code、Sublime Text等任意一款
FTP或文件管理器：用于上传CSS和JavaScript文件（其实用主题自带功能即可，无需FTP）

我们将完全使用子比主题的“自定义CSS”和“自定义脚本”功能，所有代码都写在后台，不会动任何核心文件。升级主题时这些自定义代码会自动保留。

第一步：用CSS搭建粒子画布的舞台

进入WordPress后台 → 外观 → 自定义 → 额外CSS。把下面的代码粘贴进去，保存即可。

/* 文章列表页背景容器 */
.zib-article-list {
  position: relative;
  overflow: hidden;
  background: #0a0a1a;
}

/* 3D粒子画布 */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* 文章列表项悬停效果 */
.zib-post-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}

.zib-post-item:hover {
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

这段CSS做了三件事：给列表页一个深蓝黑色的背景，为即将生成的粒子画布预留位置，以及让文章卡片在鼠标悬停时轻微放大并透出金色光晕。注意这里z-index: -1把画布推到了最底层，不会遮挡任何列表内容。

第二步：用JavaScript创建3D粒子银河风暴

CSS只是搭好了舞台，真正的演员是JavaScript。进入后台 → 外观 → 自定义 → 额外脚本，在“页脚脚本”框中粘贴以下代码：

// 3D粒子银河风暴
(function() {
  const canvas = document.createElement('canvas');
  canvas.id = 'particle-canvas';
  document.body.prepend(canvas);
  
  const ctx = canvas.getContext('2d');
  let particles = [];
  let mouseX = 0, mouseY = 0;
  
  // 初始化画布尺寸
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);
  
  // 粒子类
  class Particle {
    constructor() {
      this.x = Math.random() * canvas.width;
      this.y = Math.random() * canvas.height;
      this.z = Math.random() * 1000;
      this.radius = Math.random() * 3 + 1;
      this.color = `hsl(${Math.random() * 60 + 240}, 80%, 60%)`;
      this.speed = 0.002;
    }
    
    update() {
      this.z -= this.speed;
      if (this.z < 0) {
        this.z = 1000;
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
      }
      
      // 鼠标引力效果
      const dx = this.x - mouseX;
      const dy = this.y - mouseY;
      const dist = Math.sqrt(dx*dx + dy*dy);
      if (dist < 200) {
        const force = (200 - dist) / 200 * 10;
        this.x -= dx / dist * force;
        this.y -= dy / dist * force;
      }
    }
    
    draw() {
      const scale = 1000 / (this.z + 1);
      const x = (this.x - canvas.width/2) * scale + canvas.width/2;
      const y = (this.y - canvas.height/2) * scale + canvas.height/2;
      const r = this.radius * scale;
      
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2);
      ctx.fillStyle = this.color;
      ctx.globalAlpha = 1 - this.z / 1000;
      ctx.fill();
    }
  }
  
  // 生成粒子
  for (let i = 0; i < 500; i++) {
    particles.push(new Particle());
  }
  
  // 鼠标追踪
  document.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });
  
  // 动画循环
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => {
      p.update();
      p.draw();
    });
    requestAnimationFrame(animate);
  }
  animate();
})();

这段脚本生成了500个粒子，每个粒子在蓝紫色范围内随机取色，并通过z轴模拟深度感——靠近屏幕的粒子更大更亮，远处的则小且暗淡，形成银河风暴的立体效果。当鼠标移动时，200像素范围内的粒子会受到引力向鼠标位置汇聚，这就是“黑洞吞噬”的视觉核心。

如果你对3D粒子特效的底层原理感兴趣，可以研究一下scale变量的计算方式——它通过透视投影把二维坐标转换为三维空间感，这是所有3D粒子效果的基础。

第三步：让特效在移动端也流畅运行

500个粒子在桌面端毫无压力，但手机或低配电脑可能会卡顿。建议在生成粒子前加一段性能检测：

// 检测设备性能
const isMobile = /Android|iPhone|iPad/i.test(navigator.userAgent);
const particleCount = isMobile ? 200 : 500;
for (let i = 0; i < particleCount; i++) {
  particles.push(new Particle());
}

把原来for (let i = 0; i < 500; i++)那行替换成上面这段。移动端只生成200个粒子，保证流畅度的同时视觉效果依然在线。

第四步：调试时最常见的3个问题

刷新文章列表页，如果粒子没有出现，先别急。按顺序检查以下三点：

自定义脚本保存了吗？——很多新手会忘记点“发布”按钮。打开浏览器控制台（F12），看有没有JavaScript报错
z-index被覆盖了？——如果粒子显示在其他元素上面，把CSS中的z-index: -1改成-10试试
主题用了AJAX加载？——部分主题的文章列表是通过AJAX动态加载的，需要确保脚本在DOM完全加载后执行。可以把脚本放在页脚，或者用document.addEventListener('DOMContentLoaded', ...)包裹