客制化里面加ccs：

ccs
展开代码
.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  will-change: transform;
  user-select: none;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  /* 确保GPU加速 */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

客制化里面加js：

js
展开代码
class SnowflakeSystem {
  constructor() {
    this.snowflakes = [];
    this.snowflakeChars = ['❄', '❅', '❆', '✻', '✼', '❄️'];
    this.snowflakeCount = Math.min(120, Math.floor(window.innerWidth * window.innerHeight / 4000)); // 增加雪花数量
    this.isRunning = false;
    this.lastUpdateTime = 0;
    this.init();
  }

  init() {
    // 创建雪花容器
    this.container = document.createElement('div');
    this.container.className = 'snow-container';
    this.container.style.position = 'fixed';
    this.container.style.top = '0';
    this.container.style.left = '0';
    this.container.style.width = '100%';
    this.container.style.height = '100%';
    this.container.style.pointerEvents = 'none';
    this.container.style.zIndex = '-1';
    this.container.style.overflow = 'hidden';
    document.body.appendChild(this.container);

    // 创建雪花 - 主要分布在两侧
    for (let i = 0; i < this.snowflakeCount; i++) {
      this.addSnowflake();
    }
    
    this.start();
  }

  addSnowflake() {
    const snowflake = this.createSnowflake();
    this.snowflakes.push(snowflake);
    this.container.appendChild(snowflake.element);
    return snowflake;
  }

  createSnowflake() {
    const element = document.createElement('div');
    element.className = 'snowflake';
    element.style.position = 'absolute';
    element.style.willChange = 'transform';
    element.style.userSelect = 'none';
    
    // 随机选择雪花字符
    const char = this.snowflakeChars[Math.floor(Math.random() * this.snowflakeChars.length)];
    element.textContent = char;
    
    // 随机大小
    const size = 0.3 + Math.random() * 0.7;
    element.style.fontSize = `${size}em`;
    
    // 随机透明度
    const opacity = 0.2 + Math.random() * 0.5;
    element.style.opacity = opacity;
    
    // 随机颜色（白色或浅蓝色）
    const colors = ['#ffffff', '#e6f7ff', '#d1f0ff'];
    element.style.color = colors[Math.floor(Math.random() * colors.length)];
    
    // 初始位置 - 主要分布在屏幕两侧
    let x;
    const screenThird = window.innerWidth / 3;
    
    // 70%的雪花分布在两侧区域
    if (Math.random() < 0.7) {
      // 左侧区域 (0-1/3宽度)
      if (Math.random() < 0.5) {
        x = Math.random() * screenThird;
      } 
      // 右侧区域 (2/3-全宽)
      else {
        x = screenThird * 2 + Math.random() * screenThird;
      }
    } 
    // 30%的雪花分布在中间区域
    else {
      x = screenThird + Math.random() * screenThird;
    }
    
    const y = -50 - Math.random() * 100;
    
    // 应用初始位置
    element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
    
    return {
      element: element,
      x: x,
      y: y,
      speed: 0.5 + Math.random() * 1.5,
      drift: (Math.random() - 0.5) * 0.8,
      size: size,
      // 添加区域标识：0=左侧, 1=中间, 2=右侧
      zone: x < screenThird ? 0 : (x > screenThird * 2 ? 2 : 1)
    };
  }

  resetSnowflake(snowflake) {
    const screenThird = window.innerWidth / 3;
    
    // 根据当前区域决定重置位置
    if (snowflake.zone === 0) {
      // 左侧区域重置
      snowflake.x = Math.random() * screenThird;
    } else if (snowflake.zone === 2) {
      // 右侧区域重置
      snowflake.x = screenThird * 2 + Math.random() * screenThird;
    } else {
      // 中间区域重置
      snowflake.x = screenThird + Math.random() * screenThird;
    }
    
    snowflake.y = -50 - Math.random() * 100;
    snowflake.speed = 0.5 + Math.random() * 1.5;
    snowflake.drift = (Math.random() - 0.5) * 0.8;
  }

  update(timestamp) {
    if (!this.lastUpdateTime) this.lastUpdateTime = timestamp;
    const deltaTime = timestamp - this.lastUpdateTime;
    this.lastUpdateTime = timestamp;
    
    // 确保最小时间间隔
    if (deltaTime > 100) return;
    
    // 基于时间差更新位置
    const deltaFactor = Math.min(deltaTime / 16, 2.5);
    
    this.snowflakes.forEach(snowflake => {
      // 更新位置
      snowflake.y += snowflake.speed * deltaFactor;
      
      // 两侧区域的雪花漂移幅度更大
      if (snowflake.zone === 0 || snowflake.zone === 2) {
        snowflake.x += snowflake.drift * deltaFactor * 1.5;
      } else {
        snowflake.x += snowflake.drift * deltaFactor * 0.5;
      }
      
      // 边界检查
      if (snowflake.y > window.innerHeight + 50) {
        this.resetSnowflake(snowflake);
      }
      
      // 水平边界处理 - 只在两侧区域循环
      if (snowflake.zone !== 1) {
        if (snowflake.x > window.innerWidth + 50) {
          snowflake.x = -50;
        } else if (snowflake.x < -50) {
          snowflake.x = window.innerWidth + 50;
        }
      }
      
      // 应用位置
      snowflake.element.style.transform = `translate3d(${snowflake.x}px, ${snowflake.y}px, 0)`;
    });
  }

  start() {
    if (this.isRunning) return;
    this.isRunning = true;
    this.lastUpdateTime = 0;
    
    const animate = (timestamp) => {
      if (!this.isRunning) return;
      this.update(timestamp);
      requestAnimationFrame(animate);
    };
    
    requestAnimationFrame(animate);
  }

  stop() {
    this.isRunning = false;
  }

  handleResize() {
    // 更新容器尺寸
    this.container.style.width = `${window.innerWidth}px`;
    this.container.style.height = `${window.innerHeight}px`;
    
    // 调整现有雪花位置
    const screenThird = window.innerWidth / 3;
    
    this.snowflakes.forEach(snowflake => {
      // 重新计算区域
      snowflake.zone = snowflake.x < screenThird ? 0 : (snowflake.x > screenThird * 2 ? 2 : 1);
      
      // 如果雪花在中间区域，稍微调整位置
      if (snowflake.zone === 1 && Math.random() < 0.3) {
        // 30%概率将中间区域的雪花移到两侧
        if (Math.random() < 0.5) {
          snowflake.x = Math.random() * screenThird;
          snowflake.zone = 0;
        } else {
          snowflake.x = screenThird * 2 + Math.random() * screenThird;
          snowflake.zone = 2;
        }
      }
      
      snowflake.element.style.transform = `translate3d(${snowflake.x}px, ${snowflake.y}px, 0)`;
    });
  }
}

// 创建雪花系统实例
let snowSystem;

window.addEventListener('DOMContentLoaded', () => {
  snowSystem = new SnowflakeSystem();
});

// 防抖的resize处理
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    if (snowSystem) snowSystem.handleResize();
  }, 100);
});

// 页面可见性控制
document.addEventListener('visibilitychange', () => {
  if (snowSystem) {
    document.hidden ? snowSystem.stop() : snowSystem.start();
  }
});