基于Html+CSS+JS实现手动放烟花效果-前端开发

下面我将为您详细讲解基于Html+CSS+JS实现手动放烟花效果的完整攻略。

下面我将为您详细讲解基于Html+CSS+JS实现手动放烟花效果的完整攻略。

需求分析

为了实现手动放烟花效果，需要实现以下功能：

通过点击页面添加烟花；
每个烟花需要有不同的颜色和大小；
烟花需要能够在页面上随机位置爆炸，并播放烟花爆炸动画；
烟花爆炸效果需要自动消失，不占用页面空间；
页面需要考虑到不同的屏幕大小，能够自适应。

技术实现

HTML

在 HTML 中，我们需要先创建一个空的容器，用于放置烟花。这个容器可以是一个 div，例如：

<div id="fireworks-container"></div>

CSS

对于 CSS，我们可以给烟花容器设置一些基本样式，例如：

#fireworks-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.9);
}

这里采用了 fixed 定位，使容器始终位于页面顶部，而 background-color 则是用来遮盖页面内容，突出烟花效果。接下来，我们需要创建烟花的样式。

.firework {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: explode 1s ease-out;
  animation-fill-mode: forwards;
}

@keyframes explode {
  to {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

这段代码定义了烟花的样式，给它们设置了位置、大小、边框圆角。接下来通过 keyframes 创建烟花爆炸动画，其中 to 关键字表示在动画结束时的状态。可以看到，最终的状态是将烟花放大并透明度降至零，直至消失。

JavaScript

在 JavaScript 中，我们需要编写代码实现烟花的生成、爆炸和消失。

生成烟花

首先，我们需要在页面中添加点击事件，当用户点击时就会在页面上添加一个烟花。

document.addEventListener('click', function(event) {
  createFirework(event.clientX, event.clientY);
});

在点击事件中，我们调用了 createFirework 函数，传入事件的坐标参数，例如：

function createFirework(x, y) {
  var firework = document.createElement('div');
  firework.className = 'firework';
  firework.style.left = x + 'px';
  firework.style.top = y + 'px';
  firework.style.backgroundColor = getRandomColor();
  firework.style.animationDuration = getRandomNumber(1, 2) + 's';

  document.getElementById('fireworks-container').appendChild(firework);

  // 等待烟花爆炸结束后再将其从页面移除
  setTimeout(function() {
    firework.parentNode.removeChild(firework);
  }, 2000);
}

createFirework 函数实现了烟花的生成，它使用了 createElement 创建一个 div，设置了其类名（即之前定义的 firework）、位置和颜色。这里的 getRandomColor 和 getRandomNumber 是辅助函数，用来随机生成颜色和大小。最后，我们将烟花加入到容器中，通过 setTimeout 来控制烟花爆炸动画的时间，并在爆炸结束后将其从页面中移除。

随机生成烟花颜色和大小

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomColor() {
  var r = getRandomNumber(0, 255);
  var g = getRandomNumber(0, 255);
  var b = getRandomNumber(0, 255);

  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

getRandomNumber 和 getRandomColor 都是简单的取随机数和生成随机颜色的函数。

烟花爆炸动画

最后是烟花爆炸动画的实现。我们已经在 CSS 中定义了爆炸动画效果，但需要通过 JS 来触发它。我们可以通过检测动画结束事件来判断烟花是否爆炸结束，并在结束后将其从页面中移除。这个事件可以通过监听 transitionend 事件来实现。

firework.addEventListener('transitionend', function() {
  firework.parentNode.removeChild(firework);
});

示例说明

示例1

下面是一个简单的示例，点击页面会随机生成大小不同的烟花，烟花会在随机位置爆炸。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>手动放烟花效果</title>
  <style>
    #fireworks-container {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: rgba(0, 0, 0, 0.9);
    }

    .firework {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: explode 1s ease-out;
      animation-fill-mode: forwards;
    }

    @keyframes explode {
      to {
        width: 200px;
        height: 200px;
        opacity: 0;
      }
    }
  </style>
</head>
<body>
<div id="fireworks-container"></div>
<script>
  document.addEventListener('click', function(event) {
    createFirework(event.clientX, event.clientY);
  });

  function createFirework(x, y) {
    var firework = document.createElement('div');
    firework.className = 'firework';
    firework.style.left = x + 'px';
    firework.style.top = y + 'px';
    firework.style.backgroundColor = getRandomColor();
    firework.style.animationDuration = getRandomNumber(1, 2) + 's';

    document.getElementById('fireworks-container').appendChild(firework);

    // 等待烟花爆炸结束后再将其从页面移除
    firework.addEventListener('transitionend', function() {
      firework.parentNode.removeChild(firework);
    });
  }

  function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function getRandomColor() {
    var r = getRandomNumber(0, 255);
    var g = getRandomNumber(0, 255);
    var b = getRandomNumber(0, 255);

    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
  }
</script>
</body>
</html>

示例2

下面是一个稍微高级一点的示例，除了生成烟花外，还包括了烟花爆炸时的声音，以及只在指定区域内生成烟花。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>手动放烟花效果</title>
  <style>
    #fireworks-container {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: rgba(0, 0, 0, 0.9);
    }

    .firework {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: explode 1s ease-out;
      animation-fill-mode: forwards;
    }

    @keyframes explode {
      to {
        width: 200px;
        height: 200px;
        opacity: 0;
      }
    }
  </style>
</head>
<body>
<div id="fireworks-container"></div>
<script>
  // 在指定区域内生成烟花
  var container = document.getElementById('fireworks-container');
  container.addEventListener('click', function(event) {
    if (event.target == container) {
      createFirework(event.clientX, event.clientY);
      playSound();
    }
  });

  // 生成烟花
  function createFirework(x, y) {
    var firework = document.createElement('div');
    firework.className = 'firework';
    firework.style.left = x + 'px';
    firework.style.top = y + 'px';
    firework.style.backgroundColor = getRandomColor();
    firework.style.animationDuration = getRandomNumber(1, 2) + 's';

    container.appendChild(firework);

    // 等待烟花爆炸结束后再将其从页面移除
    firework.addEventListener('transitionend', function() {
      firework.parentNode.removeChild(firework);
    });
  }

  // 播放声音
  function playSound() {
    var audio = new Audio('sound.mp3');
    audio.play();
  }

  function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function getRandomColor() {
    var r = getRandomNumber(0, 255);
    var g = getRandomNumber(0, 255);
    var b = getRandomNumber(0, 255);

    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
  }
</script>
</body>
</html>

这个示例加入了播放音频的功能，需要在 HTML 中引入 sound.mp3 文件。除此之外，我们还通过检测事件的目标元素，只在容器区域内生成烟花。