智能摘要

实现效果预览

通过本教程，你将能够在文章详情页实现以下效果：

页面背景持续旋转的3D星环，由数百个彩色粒子构成
鼠标悬停时星环粒子向中心收缩，形成动态黑洞效果
鼠标移开后粒子重新扩散，恢复星环旋转状态
所有粒子自带光晕和渐变色，视觉冲击力强

深蓝色星空背景上，一个由蓝紫渐变粒子构成的3D星环在旋转，鼠标悬停在星环中心时粒子向内收缩形成光晕黑洞，画面带有动态模糊和光晕效果

前置准备

在开始前，请确保你的环境满足以下条件：

WordPress已安装并激活子比Zibll主题（推荐最新版本6.0+）
具备基础的CSS和JavaScript知识
能访问主题的额外CSS设置页面（外观 → 自定义 → 额外CSS）
或者能在子比主题设置中找到自定义脚本区域

本教程不修改任何核心文件，所有代码均通过主题提供的自定义功能注入。

步骤一：创建3D粒子星环的HTML结构

我们需要在文章详情页添加一个容器来承载粒子系统。打开子比主题的“自定义JavaScript”设置（路径：Zibll设置 → 全局脚本 → 自定义JavaScript），将以下代码粘贴进去：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 只在文章详情页执行
    if (document.querySelector('.single-content')) {
        // 创建粒子容器
        var container = document.createElement('div');
        container.id = 'particle-blackhole';
        container.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0;';
        document.body.appendChild(container);
        
        // 创建Canvas
        var canvas = document.createElement('canvas');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.style.cssText = 'display:block; width:100%; height:100%;';
        container.appendChild(canvas);
        
        var ctx = canvas.getContext('2d');
        var particles = [];
        var numParticles = 300;
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var isHovered = false;
        var mouseX = centerX;
        var mouseY = centerY;
        
        // 初始化粒子
        for (var i = 0; i < numParticles; i++) {
            var radius = 200 + Math.random() * 150; // 星环半径
            var angle = Math.random() * Math.PI * 2;
            var heightOffset = (Math.random() - 0.5) * 60; // 垂直分散
            var speed = 0.02 + Math.random() * 0.03;
            var size = 2 + Math.random() * 4;
            var hue = 200 + Math.random() * 60; // 蓝紫色系
            var particle = {
                baseRadius: radius,
                currentRadius: radius,
                angle: angle,
                heightOffset: heightOffset,
                speed: speed,
                size: size,
                hue: hue,
                saturation: 80 + Math.random() * 20,
                lightness: 50 + Math.random() * 30,
                alpha: 0.6 + Math.random() * 0.4,
                targetRadius: radius
            };
            particles.push(particle);
        }
        
        // 鼠标交互
        container.addEventListener('mouseenter', function() {
            isHovered = true;
        });
        container.addEventListener('mouseleave', function() {
            isHovered = false;
        });
        container.addEventListener('mousemove', function(e) {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });
        
        // 动画循环
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 更新粒子状态
            for (var i = 0; i < particles.length; i++) {
                var p = particles[i];
                // 更新角度
                p.angle += p.speed;
                
                // 处理鼠标悬停效果
                if (isHovered) {
                    p.targetRadius = 10 + Math.random() * 30; // 收缩到中心
                } else {
                    p.targetRadius = p.baseRadius;
                }
                p.currentRadius += (p.targetRadius - p.currentRadius) * 0.05;
                
                // 计算位置
                var x = centerX + Math.cos(p.angle) * p.currentRadius;
                var y = centerY + Math.sin(p.angle) * p.currentRadius + p.heightOffset;
                
                // 绘制粒子
                ctx.beginPath();
                ctx.arc(x, y, p.size, 0, Math.PI * 2);
                ctx.fillStyle = 'hsla(' + p.hue + ', ' + p.saturation + '%, ' + p.lightness + '%, ' + p.alpha + ')';
                ctx.shadowBlur = 15;
                ctx.shadowColor = 'hsla(' + p.hue + ', 100%, 60%, 0.5)';
                ctx.fill();
            }
            
            requestAnimationFrame(animate);
        }
        animate();
        
        // 窗口大小调整
        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            centerX = canvas.width / 2;
            centerY = canvas.height / 2;
        });
    }
});

这段JavaScript会在文章详情页创建一个Canvas，并初始化300个粒子。每个粒子围绕中心旋转，形成星环。鼠标悬停时，粒子半径收缩，营造黑洞吞噬效果。

步骤二：添加CSS样式美化

为了让粒子效果更自然且与页面融合，我们需要添加一些CSS。打开“额外CSS”设置（外观 → 自定义 → 额外CSS），粘贴以下代码：

/* 粒子容器定位 */
#particle-blackhole {
    z-index: 0 !important;
    pointer-events: auto; /* 允许鼠标交互 */
}

/* 确保文章内容在粒子之上 */
.single-content {
    position: relative;
    z-index: 1;
}

/* 添加暗色背景渐变，增强粒子可见度 */
body.single-post {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 50%, #0a0a1a 100%);
}

/* 可选：为文章区域添加半透明背景，提升可读性 */
.single-content .content-wrap {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
}

这段CSS确保粒子层位于文章内容下方，并给页面添加了深色渐变背景，让粒子效果更突出。同时为文章区域添加了毛玻璃效果，提升文字可读性。

步骤三：参数调优与个性化

你可以通过调整JavaScript中的参数来改变效果：

numParticles：粒子数量，300为平衡性能与视觉效果的值，可改为200-500
baseRadius：星环基础半径，当前为200-350像素，可根据屏幕大小调整
speed：旋转速度，0.02-0.05之间，值越大旋转越快
hue：色相范围，当前为蓝紫色（200-260），可改为暖色（0-60）或冷色（180-240）
收缩效果速率：在p.currentRadius += (p.targetRadius - p.currentRadius) * 0.05中，0.05改为0.1可加快收缩速度

如果希望黑洞效果更强烈，可以将收缩后的目标半径从10 + Math.random() * 30改为5 + Math.random() * 10，让粒子更靠近中心。

步骤四：兼容性与性能优化

部分用户可能遇到性能问题或兼容性差异，按以下建议处理：

移动端适配：在移动设备上可减少粒子数量，添加屏幕宽度检测：var numParticles = window.innerWidth < 768 ? 100 : 300;
性能不足：降低粒子数量或减少阴影模糊半径（shadowBlur从15改为5）
与子比主题冲突：如果粒子遮挡了主题的导航栏或按钮，调整z-index值，如将容器的z-index改为-1
页面加载闪烁：在CSS中添加#particle-blackhole { opacity: 0; animation: fadeIn 0.5s ease forwards; } @keyframes fadeIn { to { opacity: 1; } }