jquery加css实现五彩缤纷的烟花

以下是使用jQuery和CSS实现五彩缤纷的烟花的示例代码：

HTML代码：

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

CSS代码：

/* 烟花容器样式 */
#fireworks-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  overflow: hidden;
}

/* 烟花元素样式 */
.firework {
  position: absolute;
}

/* 烟花粒子样式 */
.particle {
  position: absolute;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

/* 颜色样式 */
.red {
  background-color: #FF4136;
}

.orange {
  background-color: #FF851B;
}

.yellow {
  background-color: #FFDC00;
}

.green {
  background-color: #2ECC40;
}

.blue {
  background-color: #0074D9;
}

.purple {
  background-color: #B10DC9;
}

JavaScript代码：

$(document).ready(function() {
  // 烟花粒子总数
  var particlesCount = 30;

  // 创建烟花的函数
  function createFirework() {
    // 计算烟花的起点和终点位置
    var startX = Math.random() * $(window).width();
    var startY = $(window).height();
    var endX = Math.random() * $(window).width();
    var endY = Math.random() * $(window).height() / 2;

    // 创建烟花元素
    var firework = $('<div class="firework"/>').appendTo('#fireworks-container');

    // 创建烟花粒子元素并添加到烟花元素上
    var particles = [];
    for (var i = 0; i < particlesCount; i++) {
      var particle = $('<div class="particle"/>').appendTo(firework);
      particles.push(particle);
    }

    // 选择一个随机的颜色添加到烟花粒子元素上
    var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
    var color = colors[Math.floor(Math.random() * colors.length)];
    particles.forEach(function(particle) {
      particle.addClass(color);
    });

    // 烟花动画
    firework.animate({
      'opacity': 0.1,
      'top': endY,
      'left': endX,
      'width': 0,
      'height': 0
    }, 1500, function() {
      firework.remove();
    });

    // 烟花粒子动画
    particles.forEach(function(particle) {
      particle.animate({
        'top': Math.random() * $(window).height(),
        'left': Math.random() * $(window).width(),
        'opacity': 0.1
      }, Math.random() * 1000 + 500, function() {
        particle.remove();
      });
    });
  }

  // 每隔1秒钟创建一个烟花
  setInterval(createFirework, 1000);
});

在代码中，我们先创建了一个用于显示烟花的容器，然后编写了CSS样式用于定义烟花和烟花粒子的样式。接着，我们编写了JavaScript代码用于创建烟花和烟花粒子的动画效果。

在代码中，我们定义了一个函数 `createFirework` 用于创建烟花和烟花粒子的动画效果。在该函数中，我们首先计算出烟花的起点和终点位置，并创建烟花元素。然后，我们创建了烟花粒子元素，并选择一个随机的颜色添加到烟花粒子元素上。接着，我们定义了烟花和烟花粒子的动画效果，并在动画完成后删除相应的元素。最后，我们使用 `setInterval` 函数每隔1秒钟创建一个烟花。