智能摘要

为什么你的文章详情页需要一个动态背景？

在子比Zibll主题中，文章详情页是用户停留时间最长的场景。一个纯粹的静态页面容易让人产生视觉疲劳，而加入全屏粒子流动与动态3D旋转发光环特效，能瞬间抓住眼球，营造出沉浸式的阅读氛围。本教程将带你从零开始实现这一特效，所有代码均适配最新版子比主题与主流浏览器，无需额外插件，仅需CSS与JavaScript即可完成。

一张宽屏展示效果图，左侧为粒子流动的彩色轨迹，右侧为3D旋转发光环（蓝色渐变光晕），整体深色背景，科技感光效，构图左右均衡

第一步：理解原理与准备工作

这个特效由两个独立系统构成，它们互不干扰却共同营造出科技感十足的视觉体验：

全屏粒子流动系统：基于Canvas绘制数百个彩色粒子，沿随机轨迹缓慢移动，形成流动感。
3D旋转发光环：使用CSS 3D变换与动画，创建一个带有光晕效果的环形元素，持续旋转。

你需要将代码插入到子比主题的文章详情页（single.php或自定义模板）中。建议在主题设置里开启“自定义CSS/JS”功能，或者直接编辑子主题文件，这样便于管理和维护。

第二步：添加HTML结构

在文章详情页的合适位置——比如文章内容容器外部，或者作为悬浮层——添加以下代码。建议放在页面底部，避免影响主要内容的加载速度。

<!-- 粒子背景容器 -->
<div id="particle-bg"></div>
<!-- 3D发光环容器 -->
<div id="glow-ring">
  <div class="ring-inner"></div>
</div>

第三步：CSS样式定义

将以下CSS添加到子比主题的自定义CSS区域（路径：主题设置 → 自定义代码 → 自定义CSS）或子主题的style.css中。

/* 粒子容器：全屏固定定位，置于内容之下 */
#particle-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* 确保在内容后面 */
  pointer-events: none; /* 允许点击穿透 */
}

/* 3D发光环容器：固定定位，居中偏右 */
#glow-ring {
  position: fixed;
  top: 50%;
  right: 10%;
  width: 200px;
  height: 200px;
  transform: translateY(-50%);
  perspective: 800px;
  z-index: 1;
  pointer-events: none;
}

/* 环形内部元素：3D旋转动画 */
.ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,150,255,0.3) 0%, transparent 70%);
  box-shadow: 0 0 30px rgba(0,150,255,0.5), 0 0 60px rgba(0,150,255,0.2);
  animation: rotateRing 10s infinite linear;
  transform-style: preserve-3d;
}

/* 旋转关键帧 */
@keyframes rotateRing {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg); }
}

第四步：JavaScript粒子系统脚本

将以下JavaScript代码添加到主题的自定义JS区域或子主题的footer.php中。这个脚本会动态生成粒子并驱动动画循环，让粒子在背景中自由流动。

// 粒子系统配置
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const container = document.getElementById('particle-bg');
container.appendChild(canvas);

let width = canvas.width = window.innerWidth;
let height = canvas.height = window.innerHeight;

// 粒子数组
const particles = [];
const particleCount = 150;

// 粒子类
class Particle {
  constructor() {
    this.x = Math.random() * width;
    this.y = Math.random() * height;
    this.size = Math.random() * 3 + 1;
    this.speedX = (Math.random() - 0.5) * 1;
    this.speedY = (Math.random() - 0.5) * 1;
    this.color = `hsl(${Math.random() * 360}, 70%, 60%)`;
    this.opacity = Math.random() * 0.5 + 0.3;
  }
  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    // 边界反弹
    if (this.x < 0 || this.x > width) this.speedX *= -1;
    if (this.y < 0 || this.y > height) this.speedY *= -1;
  }
  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.globalAlpha = this.opacity;
    ctx.fill();
  }
}

// 初始化粒子
for (let i = 0; i < particleCount; i++) {
  particles.push(new Particle());
}

// 动画循环
function animate() {
  ctx.clearRect(0, 0, width, height);
  particles.forEach(p => {
    p.update();
    p.draw();
  });
  requestAnimationFrame(animate);
}
animate();

// 窗口大小自适应
window.addEventListener('resize', () => {
  width = canvas.width = window.innerWidth;
  height = canvas.height = window.innerHeight;
});