智能摘要

前言：为文章详情页注入沉浸式视觉体验

在子比Zibll主题中，文章详情页是用户停留时间最长的区域。通过CSS与JavaScript的结合，我们可以为这个核心区域添加动态粒子漩涡与3D旋转星环特效，让内容展示更具科技感与交互性。本教程将从零开始，逐步引导你实现这一效果，所有代码均经过测试，适用于最新版子比主题。

一幅深色科技风格的页面截图，中心是动态粒子漩涡，周围环绕3D旋转星环，整体色调为蓝紫渐变，构图采用中心对称，粒子从边缘向中心螺旋汇聚。

准备工作：了解所需技术与文件结构

本特效依赖CSS3动画与Canvas绘图技术。你需要在子比主题的自定义CSS与自定义JavaScript区域添加代码，或者通过子主题的style.css和functions.js文件实现。推荐使用子主题，避免主题更新覆盖代码。

所需文件

CSS文件：存放粒子容器样式与星环动画关键帧
JavaScript文件：实现粒子系统的动态生成与3D旋转逻辑。一个高效的粒子系统能确保动画流畅，避免页面卡顿。
HTML结构：在文章详情页插入特效容器（通过子比主题的钩子函数）

第一步：创建特效容器HTML结构

在子比主题中，我们可以利用zibll_article_main_before或zibll_article_main_after钩子，在文章内容前后插入特效容器。打开子主题的functions.php文件，添加以下代码：

// 在文章详情页主内容前插入特效容器
add_action('zibll_article_main_before', function() {
    if (is_single()) {
        echo '';
        echo '  ';
        echo '  ';
        echo '';
    }
});

这段代码会在每篇文章开头生成一个div容器，内部包含Canvas画布（用于粒子漩涡）和一个div元素（用于3D星环）。容器默认全屏显示，但通过CSS可以限制在文章内容区域。

第二步：CSS样式配置

进入子比主题后台的“外观”->“自定义CSS”，或者编辑子主题的style.css文件，添加以下样式：

/* 粒子漩涡容器样式 */
#particle-vortex-container {
    position: relative;
    width: 100%;
    height: 500px; /* 可根据需要调整高度 */
    overflow: hidden;
    background: #0a0a1a; /* 深色背景 */
    border-radius: 12px;
    margin-bottom: 20px;
}

/* Canvas画布全屏填充 */
#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 3D星环样式 */
#star-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    border: 2px solid rgba(100, 150, 255, 0.6);
    border-radius: 50%;
    z-index: 2;
    /* 3D旋转动画 */
    animation: rotateRing 8s linear infinite;
    box-shadow: 0 0 20px rgba(100, 150, 255, 0.5);
}

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

/* 为星环添加小圆点装饰 */
#star-ring::before,
#star-ring::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}

#star-ring::before {
    top: -5px;
    left: 50%;
    margin-left: -5px;
}

#star-ring::after {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
}

注意：星环的3D旋转使用了rotateX和rotateY，产生倾斜透视效果。你可以调整rotateX(60deg)的数值改变倾斜角度。

第三步：JavaScript实现动态粒子漩涡

在子比主题的“外观”->“自定义JavaScript”区域，或者子主题的functions.js文件中，添加以下代码：

// 粒子漩涡系统
(function() {
    const canvas = document.getElementById('particle-canvas');
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    let particles = [];
    let animationId;

    // 初始化画布尺寸
    function resizeCanvas() {
        const container = document.getElementById('particle-vortex-container');
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    // 粒子类
    class Particle {
        constructor() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.size = Math.random() * 3 + 1;
            this.speedX = (Math.random() - 0.5) * 2;
            this.speedY = (Math.random() - 0.5) * 2;
            this.color = `hsl(${Math.random() * 60 + 200}, 80%, 60%)`; // 蓝紫色调
        }

        update() {
            // 漩涡效果：向中心点（canvas中心）旋转并靠近
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const dx = this.x - centerX;
            const dy = this.y - centerY;
            const dist = Math.sqrt(dx * dx + dy * dy);

            if (dist > 1) {
                // 切线方向（旋转）
                const angle = Math.atan2(dy, dx) + Math.PI / 2;
                this.speedX += Math.cos(angle) * 0.05;
                this.speedY += Math.sin(angle) * 0.05;
                // 径向方向（向心）
                this.speedX -= (dx / dist) * 0.02;
                this.speedY -= (dy / dist) * 0.02;
            }

            // 限制速度
            const maxSpeed = 3;
            const speed = Math.sqrt(this.speedX * this.speedX + this.speedY * this.speedY);
            if (speed > maxSpeed) {
                this.speedX = (this.speedX / speed) * maxSpeed;
                this.speedY = (this.speedY / speed) * maxSpeed;
            }

            this.x += this.speedX;
            this.y += this.speedY;

            // 边界处理：从另一侧出现
            if (this.x < 0) this.x = canvas.width;
            if (this.x > canvas.width) this.x = 0;
            if (this.y < 0) this.y = canvas.height;
            if (this.y > canvas.height) this.y = 0;
        }

        draw() {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();

            // 添加发光效果
            ctx.shadowColor = this.color;
            ctx.shadowBlur = 10;
        }
    }

    // 创建粒子群
    function initParticles(count) {
        particles = [];
        for (let i = 0; i < count; i++) {
            particles.push(new Particle());
        }
    }
    initParticles(200);

    // 绘制粒子间的连线
    function drawConnections() {
        for (let i = 0; i < particles.length; i++) {
            for (let j = i + 1; j < particles.length; j++) {
                const dx = particles[i].x - particles[j].x;
                const dy = particles[i].y - particles[j].y;
                const dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 100) {
                    ctx.strokeStyle = `rgba(100, 150, 255, ${1 - dist / 100})`;
                    ctx.lineWidth = 0.5;
                    ctx.beginPath();
                    ctx.moveTo(particles[i].x, particles[i].y);
                    ctx.lineTo(particles[j].x, particles[j].y);
                    ctx.stroke();
                }
            }
        }
    }

    // 动画循环
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.shadowBlur = 0; // 重置阴影避免影响连线

        particles.forEach(p => {
            p.update();
            p.draw();
        });

        drawConnections();

        animationId = requestAnimationFrame(animate);
    }
    animate();

    // 清理动画（页面离开时停止）
    window.addEventListener('beforeunload', function() {
        cancelAnimationFrame(animationId);
    });
})();

这段代码创建了一个包含200个粒子的漩涡系统。每个粒子会向画布中心旋转并靠近，形成螺旋效果。粒子之间在距离小于100像素时会绘制半透明连线，增强视觉层次。

第四步：调整与优化

根据你的实际需求，可以调整以下参数：

粒子数量：initParticles(200)中的200，数值越大性能消耗越高
粒子大小：this.size = Math.random() * 3 + 1中的3和1
漩涡速度：this.speedX += Math.cos(angle) * 0.05中的0.05
星环大小：CSS中#star-ring的width和height
星环颜色：CSS中border-color和box-shadow值

如果粒子效果显得杂乱，可以增加maxSpeed的值（如改为4），让粒子运动更流畅。也可以调整drawConnections中的距离阈值（100），减少连线数量。

第五步：添加鼠标交互（进阶）

如果你希望粒子与鼠标产生互动，可以在JavaScript中添加鼠标事件监听。在animate函数之前插入以下代码：

// 鼠标交互：粒子排斥鼠标
let mouse = { x: null, y: null };
canvas.addEventListener('mousemove', function(e) {
    const rect = canvas.getBoundingClientRect();
    mouse.x = e.clientX - rect.left;
    mouse.y = e.clientY - rect.top;
});
canvas.addEventListener('mouseleave', function() {
    mouse.x = null;
    mouse.y = null;
});

// 在Particle类的update方法中添加排斥逻辑
// 在update方法内部，边界处理之前添加：
if (mouse.x !== null && mouse.y !== null) {
    const dx = this.x - mouse.x;
    const dy = this.y - mouse.y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    if (dist < 150) {
        const force = (150 - dist) / 150;
        this.speedX += (dx / dist) * force * 2;
        this.speedY += (dy / dist) * force * 2;
    }
}

这样当鼠标移动到粒子区域时，粒子会像被吹开一样散开，离开后恢复漩涡状态。