js实现放烟花效果，结合JS+html+css

| 2023-11-7 19:30:53

小编学js不少年了，做过前端的那种插件和调试，今天闲着无聊就想着怎么用js+css+html给大家实现一个放烟花的效果，其实这个代码的实现逻辑也没有大家想想的那么难，下面就跟着我的操作一步步来，你也能实现这种效果哈。

整个实现原理和过程：

HTML: 用于放置烟花动画的容器。
CSS: 用于定义烟花的基本样式和动画。
JavaScript: 用于创建烟花的动画逻辑和控制它们的行为。

教程开始：
1、在本地我们新建三个文件，分别为：index.html、styles.css、script.js
截图202311071926339244.png

2、然后把下面的代码粘贴到index.html里面

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fireworks</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="fireworks-container"></div>
<script src="script.js"></script>
</body>
</html>

复制代码

3、然后再把下面代码粘贴到styles.css文件里面

/* Basic styles for fireworks container */
#fireworks-container {
position: relative;
width: 100vw;
height: 100vh;
background: black;
overflow: hidden;
}
/* Basic styles for a firework */
.firework {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: white;
opacity: 0;
animation: firework 2s forwards;
}
/* Keyframes for firework animation */
@keyframes firework {
0% {
opacity: 1;
transform: scale(0);
}
100% {
opacity: 0;
transform: scale(1);
}
}

复制代码

4、然后再把下面代码粘贴到script.js文件里面

// Function to create a single firework particle
function createFirework(x, y) {
const firework = document.createElement('div');
firework.classList.add('firework');
firework.style.left = x + 'px';
firework.style.top = y + 'px';
document.getElementById('fireworks-container').appendChild(firework);
// Remove firework after animation ends
firework.addEventListener('animationend', function() {
firework.remove();
});
}
// Function to launch a firework at a random position
function launchFirework() {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
createFirework(x, y);
}
// Launch a new firework every 500 milliseconds
setInterval(launchFirework, 500);

复制代码

5、最后我们打开index.html，看下效果，发现粒子缺少有点少，这个其实你后期是可以优化一下的
截图202311071930519268.png

| 2023-11-7 19:31:02

感谢分享

| 2023-11-7 19:31:24

粒子太少的问题怎么解决呢

| 2023-11-7 19:31:57

幸运平台发表于 2023-11-7 19:31
粒子太少的问题怎么解决呢

改进下代码

| 2023-11-7 19:33:22

这是我改进的代码，发现粒子明显多了

// Function to generate a random color
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Function to create a single firework particle
function createFirework(x, y, color) {
const firework = document.createElement('div');
firework.classList.add('firework');
firework.style.left = x + 'px';
firework.style.top = y + 'px';
firework.style.backgroundColor = color;
document.getElementById('fireworks-container').appendChild(firework);
// Randomize the animation
const scale = Math.random() * 0.5 + 0.5; // Size between 0.5 and 1
const duration = Math.random() * 900 + 100; // Duration between 100ms and 1000ms
const opacity = Math.random() * 0.5 + 0.5; // Opacity between 0.5 and 1
firework.style.transform = `scale(${scale})`;
firework.style.opacity = opacity;
firework.style.transition = `all ${duration}ms`;
// Apply animation
setTimeout(() => {
firework.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 200}px) scale(0)`;
firework.style.opacity = 0;
}, 10);
// Remove firework after animation ends
setTimeout(() => {
firework.remove();
}, duration);
}
// Function to launch multiple fireworks at a random position
function launchFireworks() {
const count = Math.random() * 20 + 30; // Launch between 30 and 50 particles
for (let i = 0; i < count; i++) {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
const color = getRandomColor();
createFirework(x, y, color);
}
}
// Launch new fireworks every 500 milliseconds
setInterval(launchFireworks, 500);

复制代码

		自动登录	找回密码
密码			立即注册

[推广技巧] js实现放烟花效果，结合JS+html+css