智能摘要

效果预览与目标

本教程将带领你实现文章详情页的动态粒子极光与3D旋转水晶球交互特效。粒子极光在页面背景中缓缓流动，色彩渐变；水晶球由多层发光环和内部粒子构成，随鼠标拖拽旋转。所有代码基于纯CSS和JavaScript，无需额外插件，兼容WordPress最新版和子比Zibll主题v8.0+。

适用场景：文章详情页（single.php），提升视觉冲击力。
技术栈：CSS3动画、Canvas粒子系统、Three.js或纯JS 3D模拟。
难度等级：中级，需了解CSS和基础JavaScript。

文章详情页顶部区域，深蓝色背景上流动着彩色粒子极光，中间悬浮一个半透明水晶球，球体内部有发光粒子旋转，整体风格科幻梦幻，色调以蓝紫渐变为主，构图居中对称

第一步：准备工作

在开始前，确保你的子比主题已更新至最新版，并开启自定义CSS和JavaScript功能。推荐在子主题中操作，避免更新时丢失修改。

备份原文章的header.php或functions.php文件。
准备一个测试文章页面，以便实时预览。
使用Chrome开发者工具（F12）调试。

1.1 创建子主题（可选）

如果你没有子主题，请创建一个。在wp-content/themes/下新建文件夹，命名为zibll-child，并创建style.css：

/*
Theme Name: Zibll Child
Template: zibll
*/
@import url('../zibll/style.css');

然后在functions.php中引入子主题样式。

第二步：添加粒子极光背景

粒子极光通过Canvas实现。在文章详情页的容器内插入一个全屏Canvas，并动态绘制粒子。

2.1 插入HTML结构

在子主题的single.php文件中，找到<div class="main-content">之前，添加以下代码：

<div id="aurora-container">
  <canvas id="aurora-canvas"></canvas>
</div>

2.2 CSS样式

在子主题style.css中添加：

#aurora-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
#aurora-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

2.3 JavaScript粒子逻辑

在footer.php或通过自定义JavaScript添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const canvas = document.getElementById('aurora-canvas');
  const ctx = canvas.getContext('2d');
  let width = canvas.width = window.innerWidth;
  let height = canvas.height = window.innerHeight;

  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) * 0.5;
      this.speedY = (Math.random() - 0.5) * 0.5;
      this.color = `hsl(${Math.random() * 60 + 200}, 80%, 60%)`;
    }
    update() {
      this.x += this.speedX;
      this.y += this.speedY;
      if (this.x > width) this.x = 0;
      if (this.x  height) this.y = 0;
      if (this.y < 0) this.y = height;
    }
    draw() {
      ctx.fillStyle = this.color;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  const particles = [];
  for (let i = 0; i  {
      p.update();
      p.draw();
    });
    // 连接相邻粒子形成极光效果
    for (let a = 0; a < particles.length; a++) {
      for (let b = a + 1; b < particles.length; b++) {
        const dx = particles[a].x - particles[b].x;
        const dy = particles[a].y - particles[b].y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 120) {
          ctx.strokeStyle = `rgba(100, 180, 255, ${1 - dist / 120})`;
          ctx.lineWidth = 1;
          ctx.beginPath();
          ctx.moveTo(particles[a].x, particles[a].y);
          ctx.lineTo(particles[b].x, particles[b].y);
          ctx.stroke();
        }
      }
    }
    requestAnimationFrame(animate);
  }
  animate();

  window.addEventListener('resize', function() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
  });
});

这段代码创建了150个彩色粒子，它们缓慢移动并互相连接，形成极光般的流动线条。

第三步：实现3D旋转水晶球

水晶球使用Three.js库或纯CSS 3D变换。这里采用简洁的CSS方案，利用透视和3D旋转模拟。

3.1 插入水晶球HTML

在single.php的#aurora-container之后添加：

<div id="crystal-ball">
  <div class="glow-ring"></div>
  <div class="glow-ring" style="animation-delay: 1s;"></div>
  <div class="glow-ring" style="animation-delay: 2s;"></div>
  <div id="inner-particles"></div>
</div>

3.2 CSS样式

#crystal-ball {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 300px;
  height: 300px;
  perspective: 600px;
  z-index: 10;
  pointer-events: auto;
  cursor: grab;
}
.glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  border: 2px solid rgba(100, 200, 255, 0.6);
  box-shadow: 0 0 30px rgba(100, 200, 255, 0.4);
  animation: rotate3d 6s linear infinite;
  transform-style: preserve-3d;
}
.glow-ring:nth-child(2) {
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-color: rgba(200, 100, 255, 0.6);
  box-shadow: 0 0 30px rgba(200, 100, 255, 0.4);
  animation-direction: reverse;
}
.glow-ring:nth-child(3) {
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border-color: rgba(255, 200, 100, 0.6);
  box-shadow: 0 0 30px rgba(255, 200, 100, 0.4);
}
@keyframes rotate3d {
  0% { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}
#inner-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  margin: -125px 0 0 -125px;
}

3.3 内部粒子动态

在JavaScript中添加：

// 创建内部粒子
const innerContainer = document.getElementById('inner-particles');
for (let i = 0; i < 30; i++) {
  const dot = document.createElement('div');
  dot.style.cssText = `
    position: absolute;
    width: 4px;
    height: 4px;
    background: hsl(${Math.random() * 360}, 80%, 60%);
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    top: ${50 + (Math.random() - 0.5) * 80}%;
    left: ${50 + (Math.random() - 0.5) * 80}%;
    animation: float 3s ease-in-out infinite;
    animation-delay: ${Math.random() * 2}s;
  `;
  innerContainer.appendChild(dot);
}
// 添加浮动动画
const style = document.createElement('style');
style.textContent = `
  @keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10px, -10px) scale(1.5); }
  }
`;
document.head.appendChild(style);

3.4 鼠标交互拖拽旋转

为水晶球添加鼠标拖拽旋转效果：

const ball = document.getElementById('crystal-ball');
let isDragging = false;
let previousX, previousY;
let rotationX = 0, rotationY = 0;

ball.addEventListener('mousedown', function(e) {
  isDragging = true;
  previousX = e.clientX;
  previousY = e.clientY;
  ball.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', function(e) {
  if (!isDragging) return;
  const deltaX = e.clientX - previousX;
  const deltaY = e.clientY - previousY;
  rotationY += deltaX * 0.5;
  rotationX -= deltaY * 0.5;
  ball.style.transform = `translate(-50%, 0) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
  previousX = e.clientX;
  previousY = e.clientY;
});

document.addEventListener('mouseup', function() {
  isDragging = false;
  ball.style.cursor = 'grab';
});

第四步：整合与优化

将上述代码合并到对应的位置。注意，粒子极光Canvas位于底层（z-index: -1），水晶球位于上层（z-index: 10），两者互不干扰。

检查Canvas是否覆盖了文章内容。如果文章内容被遮挡，调整#aurora-container的z-index为-1，并确保文章主内容区域的背景色为半透明或白色。
在移动端，减少粒子数量至80个，避免性能问题。使用window.innerWidth < 768判断。
水晶球的拖拽交互在触屏设备上需添加touch事件支持。

4.1 触屏兼容

添加以下代码支持移动设备：

ball.addEventListener('touchstart', function(e) {
  const touch = e.touches[0];
  isDragging = true;
  previousX = touch.clientX;
  previousY = touch.clientY;
});

document.addEventListener('touchmove', function(e) {
  if (!isDragging) return;
  const touch = e.touches[0];
  const deltaX = touch.clientX - previousX;
  const deltaY = touch.clientY - previousY;
  rotationY += deltaX * 0.5;
  rotationX -= deltaY * 0.5;
  ball.style.transform = `translate(-50%, 0) rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
  previousX = touch.clientX;
  previousY = touch.clientY;
});

document.addEventListener('touchend', function() {
  isDragging = false;
});