智能摘要

引言：打造独特的文章详情页视觉体验

在子比Zibll主题中，文章详情页是用户停留时间最长的区域。通过添加动态粒子极光与3D旋转水晶球交互特效，可以显著提升页面的沉浸感与科技感。本教程将手把手带你实现这一效果，所有代码均已测试，适用于最新版子比主题与主流浏览器。

一张展示文章详情页最终效果的截图，主体为粒子极光背景与一个半透明的3D旋转水晶球，水晶球表面有流动的光点，整体色调为深蓝与紫色渐变，风格为科幻感的高清渲染图，构图采用居中视角，水晶球位于页面中央偏右，粒子光晕环绕四周

准备工作：环境与文件

在开始之前，请确保你已具备以下条件：

子比Zibll主题已安装并激活（版本7.0及以上）
WordPress后台具备编辑主题文件的权限（推荐使用子主题）
浏览器支持CSS3动画与WebGL（现代浏览器均可）

我们将通过添加自定义CSS和JavaScript来实现特效，无需安装额外插件。

第一步：创建粒子极光背景

粒子极光效果使用纯CSS与Canvas实现。在子比主题的自定义CSS区域（外观→自定义→额外CSS）中添加以下代码：

/* 粒子极光背景容器 */
.article-detail-aurora {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #0a0a2e, #1a1a4e);
    overflow: hidden;
}

/* 粒子动画 */
@keyframes auroraFlow {
    0% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-30px) scale(1.2); opacity: 0.7; }
    100% { transform: translateY(0) scale(1); opacity: 0.3; }
}

.aurora-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(100, 200, 255, 0.6);
    border-radius: 50%;
    animation: auroraFlow 6s infinite ease-in-out;
}

然后，在主题的functions.php中添加以下JavaScript来生成粒子：

// 动态生成粒子
(function() {
    const container = document.createElement('div');
    container.className = 'article-detail-aurora';
    document.body.prepend(container);
    
    for (let i = 0; i < 100; i++) {
        const particle = document.createElement('div');
        particle.className = 'aurora-particle';
        particle.style.left = Math.random() * 100 + '%';
        particle.style.top = Math.random() * 100 + '%';
        particle.style.animationDelay = Math.random() * 6 + 's';
        particle.style.animationDuration = (4 + Math.random() * 4) + 's';
        container.appendChild(particle);
    }
})();

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

水晶球效果使用Three.js库创建。首先，在主题的header.php中引入Three.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

然后，在文章详情页的single.php中添加容器：

<div id="crystal-ball-container" style="position: fixed; top: 50%; right: 5%; transform: translateY(-50%); width: 300px; height: 300px; z-index: 10; pointer-events: none;"></div>

最后，在自定义JavaScript中添加以下代码：

// 3D水晶球
(function() {
    const container = document.getElementById('crystal-ball-container');
    if (!container) return;
    
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
    camera.position.z = 5;
    
    const renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);
    
    // 创建球体
    const geometry = new THREE.SphereGeometry(1.5, 32, 32);
    const material = new THREE.MeshPhongMaterial({
        color: 0x4a90d9,
        emissive: 0x1a1a4e,
        transparent: true,
        opacity: 0.8,
        shininess: 100
    });
    const sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);
    
    // 添加内部光点
    const particleCount = 200;
    const particleGeo = new THREE.BufferGeometry();
    const positions = new Float32Array(particleCount * 3);
    for (let i = 0; i < particleCount; i++) {
        const theta = Math.random() * Math.PI * 2;
        const phi = Math.acos(2 * Math.random() - 1);
        const r = 1.2 + Math.random() * 0.3;
        positions[i*3] = r * Math.sin(phi) * Math.cos(theta);
        positions[i*3+1] = r * Math.sin(phi) * Math.sin(theta);
        positions[i*3+2] = r * Math.cos(phi);
    }
    particleGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    const particleMat = new THREE.PointsMaterial({
        color: 0x00ffff,
        size: 0.05,
        transparent: true
    });
    const particles = new THREE.Points(particleGeo, particleMat);
    sphere.add(particles);
    
    // 光源
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(1, 1, 1);
    scene.add(light);
    const ambientLight = new THREE.AmbientLight(0x404060);
    scene.add(ambientLight);
    
    // 动画循环
    function animate() {
        requestAnimationFrame(animate);
        sphere.rotation.y += 0.01;
        sphere.rotation.x += 0.005;
        renderer.render(scene, camera);
    }
    animate();
})();

第三步：整合与优化

为确保特效仅在文章详情页加载，在functions.php中添加条件判断：

add_action('wp_footer', function() {
    if (is_single()) {
        // 上述JavaScript代码（去掉注释）
    }
});

同时，在CSS中添加媒体查询，确保在移动设备上隐藏或缩小水晶球：

@media (max-width: 768px) {
    #crystal-ball-container {
        width: 150px !important;
        height: 150px !important;
        right: 2% !important;
    }
}