前端实现生日快乐加烟花特效

要实现生日快乐加烟花特效，需要用到 HTML、CSS 和 JavaScript 技术。下面我将为你提供一种简单的实现方式：

1. 在 HTML 中创建一个 div 元素，设置其宽高为 100%、背景颜色为黑色。

<div class="wrapper"></div>

2. 在 CSS 中设置 wrapper 元素的样式，并且设置烟花的样式。

.wrapper {
  width: 100%;
  height: 100%;
  background-color: black;
  position: relative;
  overflow: hidden;
}

.firework {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  animation: explode 0.5s linear;
}

@keyframes explode {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.spark {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #fff;
  animation: sparkle 1s linear infinite;
}

@keyframes sparkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

3. 在 JavaScript 中实现烟花的动画效果。

function createFirework() {
  const firework = document.createElement("div");
  const spark = document.createElement("div");
  firework.classList.add("firework");
  spark.classList.add("spark");
  firework.appendChild(spark);
  const x = Math.floor(Math.random() * window.innerWidth);
  const y = Math.floor(Math.random() * window.innerHeight);
  firework.style.left = `${x}px`;
  firework.style.top = `${y}px`;
  document.body.appendChild(firework);
  setTimeout(() => {
    firework.remove();
  }, 500);
}

setInterval(() => {
  createFirework();
}, 500);

通过以上代码，你就可以在页面中实现一个简单的生日快乐加烟花特效了。当然，你可以根据自己的需求进行更多的样式和动画效果的设置。