js实现红包雨效果,怎么实现?而且要实现遮罩层

问:

实现js红包雨效果

回答:

参考地址:?html+css/19.html · 石头/js-demo - Gitee.com

上面是源代码,

我们加以修改进行实现,

首先图片:

随机选用一张当做红包雨的图片,

点击触发红包雨的按钮,

<div id="open-rain" οnclick="openRain()">

红包雨代码,

// 红包雨代码 开始
// 添加遮罩层
const addOverlay = () => {
  const overlay = document.createElement('div');
  overlay.className = 'overlay';
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  overlay.style.zIndex = '20';
  document.body.appendChild(overlay);
}

// 移除遮罩层
const removeOverlay = () => {
  const overlay = document.querySelector('.overlay');
  if (overlay) {
    overlay.remove();
  }
}

// 开启红包雨
const openRain = () => {
  console.log('点击了openRain');
  const hongbaos = Array.from({ length: 20 }); // 创建具有指定长度的数组
  const maxLeft = document.body.offsetWidth - 40;

  // 添加遮罩层
  addOverlay();

  // 创建容器元素
  const container = document.createElement('div');
  container.className = 'container';

  for (let i = 0; i < hongbaos.length; i++) {
    const img = document.createElement('img');
    img.src = './hongbao.png';
    img.className = 'img';
    img.style.left = `${Math.random() * maxLeft}px`;
    img.style.animationDuration = `${Math.random() * 2 + 2}s`;
    img.style.animationDelay = `${i * 0.5}s`; // 设置不同的延迟时间
    container.appendChild(img);
  }


  document.body.appendChild(container);

  // 设置定时器，在四秒后移除红包雨和遮罩层
  setTimeout(() => {
    removeOverlay();
    container.remove();
  }, 4000);
}

实现红包雨效果