使用 html css 和 js 的新年快乐动画

let 延迟 = 0;

函数 shotfirework(x, y, 回调) {
  const firework = document.createelement('div');
  firework.classname = '烟花';
  firework.style.left = `${x}px`;
  firework.style.top = `${y}px`;
  firework.style.background = `hsl(${math.random() * 360}, 100%, 50%)`;
  firework.style.boxshadow = `0 0 10px hsl(${math.random() * 360}, 100%, 50%)`;

  document.body.appendchild(烟花);

  settimeout(() => {
    烟花.remove();
    回调（x，y）；
  }, 1000); // 烟花持续时间
}

函数explodefirework(x, y) {
  for (令 i = 0; i  spark.remove(), 1200); // 火花持续时间
  }
}

函数revealcharacter（字符，容器，延迟）{
  const span = document.createelement('span');
  span.classname = 'char';
  span.textcontent = char;
  span.style.animationdelay = `${delay}s`;
  span.style.color = `hsl(${math.random() * 360},
   100%, 70%)`;

  容器.appendchild(span);
}

lines.foreach((行，索引) => {
  const 容器 = document.getelementbyid(line.id);
  line.text.split('').foreach((char, i) => {
    const x = window.innerwidth / 2   i * 50 - (line.text.length * 25);
    const y = window.innerheight;

    settimeout(() => {
      shotfirework(x, y, () => {
        爆炸烟火（x，y）；
        revealcharacter(字符, 容器, 0);
      });
    }, 延迟 * 1000);

    延迟 = 1； // 每个角色烟花之间的延迟
  });
  延迟 = 1； // 线路之间的额外延迟
});