#推荐

适用于 WordPress 主题的雪花飘落特效代码

以下是一个适用于 WordPress 主题的雪花飘落特效代码，你可以将其添加到主题的 footer.php 文件或使用自定义代码插件添加到网站中：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 雪花配置
    const config = {
        colorMode: 'random', // 可选值: 'single', 'random', 'rainbow'
        singleColor: 'rgba(173, 216, 230, 0.8)', // 单色模式下的颜色
        randomColors: [
            'rgba(255, 255, 255, 0.8)', // 白色
            'rgba(173, 216, 230, 0.8)', // 淡蓝色
            'rgba(135, 206, 250, 0.8)', // 天蓝色
            'rgba(138, 43, 226, 0.6)',  // 蓝紫色
            'rgba(255, 192, 203, 0.8)'  // 粉红色
        ]
    };
    
    // 创建雪花函数
    function createSnowflake() {
        const snowflake = document.createElement('div');
        const style = snowflake.style;
        
        // 随机雪花样式
        const size = Math.random() * 5 + 2;
        style.width = `${size}px`;
        style.height = `${size}px`;
        style.borderRadius = '50%';
        style.position = 'absolute';
        style.top = '-5px';
        style.left = `${Math.random() * 100}%`;
        style.opacity = Math.random() * 0.8 + 0.2;
        style.zIndex = '9999';
        style.pointerEvents = 'none';
        
        // 设置颜色
        if (config.colorMode === 'single') {
            style.background = config.singleColor;
        } else if (config.colorMode === 'random') {
            const randomColor = config.randomColors[Math.floor(Math.random() * config.randomColors.length)];
            style.background = randomColor;
        } else if (config.colorMode === 'rainbow') {
            style.background = 'linear-gradient(90deg, ' +
                'rgba(255,0,0,0.8), ' +
                'rgba(255,165,0,0.8), ' +
                'rgba(255,255,0,0.8), ' +
                'rgba(0,128,0,0.8), ' +
                'rgba(0,0,255,0.8), ' +
                'rgba(75,0,130,0.8), ' +
                'rgba(238,130,238,0.8)' +
            ')';
            style.backgroundSize = '400% 100%';
        }
        
        // 添加动画
        const duration = Math.random() * 10 + 10;
        if (config.colorMode === 'rainbow') {
            style.animation = `snowfall ${duration}s linear forwards, ` +
                              `rainbow 5s ease infinite`;
        } else {
            style.animation = `snowfall ${duration}s linear forwards`;
        }
        
        // 添加到页面
        document.body.appendChild(snowflake);
        
        // 动画结束后移除雪花
        setTimeout(() => {
            snowflake.remove();
        }, duration * 1000);
    }
    
    // 创建关键帧动画
    const styleSheet = document.createElement('style');
    styleSheet.textContent = `
        @keyframes snowfall {
            to {
                transform: translateY(calc(100vh + 10px));
            }
        }
        @keyframes rainbow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    `;
    document.head.appendChild(styleSheet);
    
    // 定期创建雪花
    setInterval(createSnowflake, 150);
});
</script>