HTML编写烟花
先看效果
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>烟花效果</title>
<style>
/* 页面整体样式 */
body {
margin: 0; /* 去除默认的页边距 */
overflow: hidden; /* 隐藏超出视口的内容，防止滚动条出现 */
background: black; /* 设置背景色为黑色 */
}
/* 粒子的基本样式 */
.particle {
position: absolute; /* 粒子定位为绝对位置 */
width: 10px; /* 粒子的宽度 */
height: 10px; /* 粒子的高度 */
border-radius: 50%; /* 使粒子成为圆形 */
pointer-events: none; /* 使粒子不响应鼠标事件 */
}
</style>
</head>
<body>
<script>
// 获取随机颜色的函数
function getRandomColor() {
const letters = '0123456789ABCDEF'; // 颜色的十六进制字符集
let color = '#'; // 颜色值的起始字符
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]; // 随机选择字符生成颜色
}
return color; // 返回生成的颜色值
}
// 创建一个烟花效果的函数
function createFirework(x, y) {
const numParticles = 50; // 每个烟花的粒子数量
const gravity = 0.05; // 重力影响的程度
const explosionDuration = 1000; // 爆炸持续时间（毫秒）
const riseDuration = 1000; // 上升时间（毫秒）
// 随机生成爆炸的最小和最大高度
const minHeight = window.innerHeight * 0.65;
const maxHeight = window.innerHeight * 0.80;
const randomHeight = Math.random() * (maxHeight - minHeight) + minHeight; // 生成随机高度
// 创建发射器动画的元素
const launcher = document.createElement('div');
launcher.style.position = 'absolute';
launcher.style.left = `${x}px`; // 设置发射器的水平位置
launcher.style.top = `${y}px`; // 设置发射器的垂直位置
launcher.style.width = '10px'; // 发射器的宽度
launcher.style.height = '10px'; // 发射器的高度
launcher.style.background = 'white'; // 发射器的背景色
launcher.style.borderRadius = '50%'; // 发射器的形状为圆形
document.body.appendChild(launcher); // 将发射器添加到页面上
// 发射器上升动画
launcher.animate([
{ transform: `translateY(0px)`, opacity: 1 },
{ transform: `translateY(-${randomHeight}px)`, opacity: 0 } // 使用随机高度
], {
duration: riseDuration, // 动画持续时间
fill: 'forwards' // 动画结束后保留最后的状态
}).onfinish = () => {
launcher.remove(); // 动画完成后移除发射器
// 创建烟花爆炸效果
for (let i = 0; i < numParticles; i++) {
const particle = document.createElement('div');
particle.className = 'particle'; // 给粒子添加样式
particle.style.background = getRandomColor(); // 设置粒子的颜色
document.body.appendChild(particle); // 将粒子添加到页面上
const angle = Math.random() * 2 * Math.PI; // 随机角度
const speed = Math.random() * 4 + 2; // 随机速度
const initialX = x;
const initialY = y - randomHeight; // 使用随机高度
const endX = initialX + Math.cos(angle) * speed * 80; // 粒子结束位置的X坐标
const endY = initialY + Math.sin(angle) * speed * 80; // 粒子结束位置的Y坐标
// 粒子的运动动画
const animation = particle.animate([
{ transform: `translate(${initialX}px, ${initialY}px)`, opacity: 1 },
{ transform: `translate(${endX}px, ${endY}px)`, opacity: 0 }
], {
duration: explosionDuration, // 动画持续时间
easing: 'cubic-bezier(.68,-0.55,.27,1.55)', // 动画的缓动函数
fill: 'forwards' // 动画结束后保留最后的状态
});
// 添加重力效果
const gravityAnimation = particle.animate([
{ transform: `translate(${initialX}px, ${initialY}px)`, opacity: 1 },
{ transform: `translate(${endX}px, ${endY + gravity * explosionDuration}px)`, opacity: 0 }
], {
duration: explosionDuration, // 动画持续时间
fill: 'forwards' // 动画结束后保留最后的状态
});
// 清除粒子的动画
animation.onfinish = () => {
particle.remove(); // 动画完成后移除粒子
};
}
};
}
// 创建连续烟花效果的函数
function createSequentialFireworks() {
const interval = 1500; // 每组烟花的发射间隔时间（毫秒）
const numFireworks = 5; // 每组烟花的数量
let lastTime = 0; // 上一次发射的时间
function scheduleFireworks() {
const currentTime = Date.now(); // 当前时间
// 判断是否可以发射新的烟花
if (currentTime - lastTime >= interval) {
lastTime = currentTime;
for (let i = 0; i < numFireworks; i++) {
setTimeout(() => {
const x = Math.random() * window.innerWidth; // 随机发射点的X坐标
const y = window.innerHeight; // 从屏幕底部发射
createFirework(x, y); // 创建烟花效果
}, i * (interval / numFireworks)); // 每个烟花之间的时间间隔
}
}
requestAnimationFrame(scheduleFireworks); // 递归调用以保持烟花效果的持续
}
requestAnimationFrame(scheduleFireworks); // 启动烟花效果
}
createSequentialFireworks(); // 开始创建烟花效果
</script>
</body>
</html>
评论区
请登录后发表评论。