2025新春烟花代码（二）HTML5实现孔明灯和烟花效果

embedded/2025/1/12 8:31:10/

效果展示

在这里插入图片描述

源代码

html"><!DOCTYPE html>
<html lang="en">
<script>javascript">var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?45f95f1bfde85c7777c3d1157e8c2d34";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
</script>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>炸弹爆炸和烟花效果</title><style>/* 夜空背景 */body, html {margin: 0;padding: 0;overflow: hidden;background: #000;}/* 星空背景 */.starry-background {position: absolute;width: 100%;height: 100%;background: radial-gradient(circle at bottom, #001025, #000000);z-index: -1;}.stars {position: absolute;width: 100%;height: 100%;background: url('https://i.imgur.com/3Zv2v1m.png') repeat;opacity: 0.5;animation: twinkle 5s infinite alternate;}@keyframes twinkle {from {opacity: 0.3;}to {opacity: 0.7;}}/* 孔明灯样式 */.lantern {position: absolute;width: 30px;height: 45px;background: radial-gradient(circle, #ff8c00, #ff4500);border-radius: 10px;box-shadow: 0 0 10px rgba(255, 140, 0, 0.8);animation: floatUp infinite linear;}@keyframes floatUp {0% {transform: translateY(100vh); /* 从页面底部开始 */opacity: 0;}10% {opacity: 1;}100% {transform: translateY(-200%); /* 上升到页面外 */opacity: 0;}}/* 新春快乐文本样式 */.new-year-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-family: 'Arial', sans-serif;font-size: 100px; /* 增大字体 */font-weight: bold;color: #ff8c00;text-shadow: 2px 2px 10px rgba(255, 140, 0, 0.8);opacity: 0; /* 初始透明 */transition: opacity 3s ease-out; /* 设置渐变效果 */}</style>
</head>
<body><!-- 星空背景 --><div class="starry-background"><div class="stars"></div></div><!-- 新春快乐文本 --><div class="new-year-text">2025 新春快乐！</div><!-- 孔明灯容器 --><div class="lantern-container"></div><!-- 烟花效果画布 --><canvas id="fireworks"></canvas><script>javascript">// 初始化孔明灯const lanternContainer = document.querySelector('.lantern-container');// 创建一个生成孔明灯的函数，逐渐增加let lanternCount = 0;function generateLantern() {const lantern = document.createElement('div');lantern.classList.add('lantern');lantern.style.left = Math.random() * 100 + '%';lantern.style.animationDuration = `${10 + Math.random() * 5}s`;lanternContainer.appendChild(lantern);lanternCount++;if (lanternCount >= 50) clearInterval(lanternInterval);  // 限制最大数量}// 设置一个间隔，逐渐添加孔明灯const lanternInterval = setInterval(generateLantern, 200);  // 每200ms增加一个孔明灯// 烟花效果const canvas = document.getElementById('fireworks');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;let particles = [];function createFirework(x, y) {const particleCount = 150;for (let i = 0; i < particleCount; i++) {particles.push(new Particle(x, y));}}class Particle {constructor(x, y) {this.x = x;this.y = y;this.size = Math.random() * 3 + 1;this.speedX = Math.random() * 6 - 3;this.speedY = Math.random() * 6 - 3;this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;this.alpha = 1;}update() {this.x += this.speedX;this.y += this.speedY;this.alpha -= 0.01;}draw() {ctx.globalAlpha = this.alpha;ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);ctx.fill();}}function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);particles = particles.filter(particle => particle.alpha > 0);particles.forEach(particle => {particle.update();particle.draw();});requestAnimationFrame(animate);}function autoFireworks() {setInterval(() => {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height / 2;createFirework(x, y);}, 300);}animate();autoFireworks();// 绘制炸弹函数（没有导火线）let bombScale = 1; // 炸弹的初始大小let bombY = window.innerHeight / 2; // 将炸弹固定在屏幕中间let bombX = window.innerWidth / 2;let bombTimer = 0;let isExploding = false; // 是否处于爆炸状态let bombActive = true; // 判断炸弹是否仍然存在function drawBomb(x, y, scale) {ctx.save();ctx.beginPath();ctx.arc(x, y, 30 * scale, 0, Math.PI * 2, false); // 绘制炸弹的圆形，随着scale变化ctx.fillStyle = '#ffcc00'; // 黄色ctx.fill();ctx.shadowBlur = 15;ctx.shadowColor = 'rgba(255, 204, 0, 0.8)'; // 添加阴影ctx.lineWidth = 4;ctx.strokeStyle = '#ff9900';ctx.stroke();ctx.restore();}// 动画函数：炸弹上升到中间并开始呼吸效果function animateBomb() {if (bombActive) {// 在前200帧，炸弹开始呼吸效果（大小不断变化）if (bombTimer < 200) {bombScale = 1 + Math.sin(bombTimer / 30) * 0.2; // 使炸弹有呼吸的效果} else if (bombTimer >= 200 && !isExploding) {// 经过一段时间后，炸弹开始爆炸isExploding = true;setTimeout(() => {document.querySelector('.new-year-text').style.opacity = 1;  // 显示文本createFirework(bombX, bombY); // 同时创建烟花bombActive = false; // 爆炸后隐藏炸弹}, 500); // 延迟0.5秒后爆炸}drawBomb(bombX, bombY, bombScale);}bombTimer++;requestAnimationFrame(animateBomb); // 循环调用动画}// 页面加载5秒后才开始炸弹动画setTimeout(animateBomb, 5000); // 5秒后开始炸弹动画</script>
</body>
</html>

http://www.ppmy.cn/embedded/153244.html

相关文章

用 Python 绘制可爱的招财猫

用 Python 绘制可爱的招财猫

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​ ​​​​​​​​​ ​​​​ 招财猫&#xff0c;也被称为“幸运猫”&#xff0c;是一种象征财富和好运的吉祥物&#xff0c;经常…
阅读更多...
报错 - decord 在 macOS Silicon 安装失败

报错 - decord 在 macOS Silicon 安装失败

问题&#xff1a;在 macOS M2 上 pip 安装 decord 出错&#xff1a; ERROR: Could not find a version that satisfies the requirement decord (from versions: none) ERROR: No matching distribution found for decord使用 decord 源码编译&#xff0c;make 也会出很多问题 …
阅读更多...
Oracle 数据库是否学习剖析

Oracle 数据库是否学习剖析

Oracle 作为数据库领域的国际老牌劲旅&#xff0c;即便你毫无 IT 基础&#xff0c;非科班出身&#xff0c;它依然值得你深入探究。 Oracle 数据库历经数十年风雨洗礼&#xff0c;沉淀出无与伦比的稳定性。全球众多大型企业&#xff0c;从金融巨头到跨国电商&#xff0c;其核心业…
阅读更多...
Web前端基础知识（七）

Web前端基础知识（七）

要在JS中获取元素节点&#xff0c;需要使用DOM API提供的方法。 innerHTML&#xff1a;不仅会返回一个纯文本&#xff0c;还可以解析一下这个文本中的语意。 innerText: 忽略HTML标记。 举例&#xff1a; <body> <div id"box1">这是一个ID选择器标签…
阅读更多...
Linux 免杀

Linux 免杀

Linux 免杀概念 在网络安全领域&#xff0c;“免杀” 主要是指让恶意软件&#xff08;如病毒、木马、后门程序等&#xff09;躲避杀毒软件&#xff08;Antivirus&#xff0c;AV&#xff09;的检测。在 Linux 环境下&#xff0c;杀毒软件会通过多种方式来检测恶意程序&#xff…
阅读更多...
centos systemd方式配置jar开机自启

centos systemd方式配置jar开机自启

将后端服务&#xff08;一个 Java 应用程序&#xff09;注册为 CentOS 上的 systemd 服务&#xff0c;可以让你方便地管理其启动、停止和重启。以下是详细步骤&#xff1a; 创建 systemd 服务单元文件 创建一个 systemd 服务单元文件&#xff0c;例如 /etc/systemd/system/de…
阅读更多...
如何设置通过Visual Studio(VS)打开的C#项目工具集？

如何设置通过Visual Studio(VS)打开的C#项目工具集？

在Visual Studio&#xff08;VS&#xff09;中&#xff0c;C#项目通常不直接涉及“工具集”的设置&#xff0c;因为C#编译器&#xff08;csc.exe&#xff09;是.NET Framework或.NET SDK的一部分&#xff0c;而不是像C项目那样依赖于特定的编译器版本或工具集。然而&#xff0c…
阅读更多...
矩阵和向量点乘叉乘元素乘

矩阵和向量点乘叉乘元素乘

Date: 2025.01.07 Author: Xin Pan 回顾下矩阵和向量的各种乘法。 向量 点乘 又叫做点积、内积、数量积、标量积。 a [ a 1 , a 2 , . . . , a n ] a[a_1,a_2,...,a_n] a[a1​,a2​,...,an​]和 b [ b 1 , b 2 , . . . , b n ] b[b_1,b_2,...,b_n] b[b1​,b2​,...,bn​…
阅读更多...
最新文章

Copyright @ 2022~2023