生日主题的烟花特效HTML,CSS,JS

ops/2024/11/24 1:39:31/

目录

图片展示

完整代码

关键点解释


图片展示

完整代码

<!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: #000;color: white;font-family: 'Arial', sans-serif;display: flex;justify-content: center;align-items: center;flex-direction: column;}#fireworksCanvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.happy-birthday {position: relative;z-index: 10;font-size: 3rem;font-weight: bold;text-align: center;color: #fff;text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),0 0 30px rgba(255, 255, 0, 0.8),0 0 40px rgba(255, 0, 0, 0.8);animation: glow 2s infinite alternate;}@keyframes glow {from {text-shadow: 0 0 10px rgba(255, 255, 255, 0.6),0 0 20px rgba(255, 255, 0, 0.6),0 0 30px rgba(255, 0, 0, 0.6);}to {text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),0 0 40px rgba(255, 255, 0, 0.8),0 0 60px rgba(255, 0, 0, 0.8);}}</style>
</head>
<body><canvas id="fireworksCanvas"></canvas><div class="happy-birthday">🎉 生日快乐!🎉</div><script>// 初始化画布const canvas = document.getElementById('fireworksCanvas');const ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 烟花类class Firework {constructor(x, y, colors) {this.x = x;this.y = y;this.colors = colors;this.particles = [];this.createParticles();}createParticles() {for (let i = 0; i < 100; i++) {const angle = Math.random() * 2 * Math.PI;const speed = Math.random() * 4 + 2;const color = this.colors[Math.floor(Math.random() * this.colors.length)];this.particles.push({x: this.x,y: this.y,vx: Math.cos(angle) * speed,vy: Math.sin(angle) * speed,alpha: 1,color: color});}}update() {this.particles.forEach(p => {p.x += p.vx;p.y += p.vy;p.alpha -= 0.02;});this.particles = this.particles.filter(p => p.alpha > 0);}draw() {this.particles.forEach(p => {ctx.save();ctx.globalAlpha = p.alpha;ctx.fillStyle = p.color;ctx.beginPath();ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);ctx.fill();ctx.restore();});}isDone() {return this.particles.length === 0;}}// 声明 fireworks 为 letlet fireworks = [];const colors = ['#ff3d3d', '#ff9c3d', '#ffe03d', '#3dff83', '#3db9ff', '#9c3dff', '#ff3de8'];// 添加烟花function addFirework() {const x = Math.random() * canvas.width;const y = Math.random() * canvas.height / 2;fireworks.push(new Firework(x, y, colors));}// 主循环function loop() {ctx.clearRect(0, 0, canvas.width, canvas.height);if (Math.random() < 0.05) addFirework();fireworks.forEach(firework => {firework.update();firework.draw();});// 重新赋值,确保 fireworks 变量可变fireworks = fireworks.filter(firework => !firework.isDone());requestAnimationFrame(loop);}loop();// 窗口大小调整window.addEventListener('resize', () => {canvas.width = window.innerWidth;canvas.height = window.innerHeight;});</script>
</body>
</html>

关键点解释

  1. 修复错误

    • fireworks 声明改为 let,确保可以在循环中通过 fireworks = fireworks.filter(...) 重新赋值。
  2. 烟花功能

    • 每个烟花是由 Firework 类生成的粒子组成,模拟了绚丽的散开效果。
  3. 生日主题

    • 中心的文字动画通过 @keyframes glow 实现,配合文字 🎉 生日快乐!🎉 增加了节日氛围。
  4. 响应式设计

    • 监听 resize 事件,确保画布随窗口调整大小。

嗨,我是命运之光。如果你觉得我的分享有价值,不妨通过以下方式表达你的支持:👍 点赞来表达你的喜爱,📁 关注以获取我的最新消息,💬 评论与我交流你的见解。我会继续努力,为你带来更多精彩和实用的内容。

点击这里👉 ,获取最新动态,⚡️ 让信息传递更加迅速。


http://www.ppmy.cn/ops/136189.html

相关文章

开发 + 安全:网络安全的协作方法

开发团队和安全团队之间由来已久的紧张关系一直是组织内部摩擦的根源。开发人员优先考虑速度和效率&#xff0c;旨在通过快节奏、迭代的开发周期快速交付功能和产品并高效前进。另一方面&#xff0c;安全团队努力平衡风险和创新&#xff0c;但必须专注于使用护栏保护敏感数据和…

Django项目 | 实现登录注册验证电子邮箱

在实现登录验证电子邮箱时&#xff0c;需要确保模型中包含电子邮箱字段 自定义用户模型登录验证电子邮箱实现 1. 模型&#xff08;Model&#xff09; 确保自定义用户模型中包含电子邮箱字段。例如&#xff1a; from django.contrib.auth.models import AbstractUser from d…

创建可重用React组件的实用指南

尽管React是全球最受欢迎和使用最广泛的前端框架之一&#xff0c;但许多开发者在重构代码以提高可复用性时仍然感到困难。如果你发现自己在React应用中不断重复相同的代码片段&#xff0c;那你来对地方了。 在本教程中&#xff0c;将向你介绍三个最常见的特征&#xff0c;表明是…

VSCode自定义插件创建教程

文章目录 一、前言二、插件维护三、调试插件四、使用 vsce 生成 vsix 插件五、问题汇总5.1 打开调试窗口后&#xff0c;输入helloworld并没有指令提示5.2 插件调试无问题&#xff0c;打包生成 .vsix 文件后无法使用 六、插件创建实战七、拓展阅读 一、前言 对于前端程序猿来讲…

RNN简单理解;为什么出现Transformer:传统RNN的问题;Attention(注意力机制)和Self-Attention(自注意力机制)区别;

目录 RNN简单理解 RNN n to n Transformer N to M LSTM 为什么出现Transformer:传统RNN的问题 信息丢失的后果 Rnn是顺序执行的效率不高:顺序执行 Attention(注意力机制)和Self-Attention(自注意力机制)区别 一、计算对象不同 二、应用场景不同 三、功能差异…

OceanBase 中常用的查询语句

本文汇总整理了一些 OceanBase 中的常用查询语句&#xff0c;包括租户创建、转储与合并、表相关等场景&#xff0c;希望帮大家解决日常运维操作中的常见的问题。 租户类 OceanBase支持多租户架构&#xff0c;其中默认存在一个名为sys的租户。为了满足业务使用需求&#xff0c;…

uni-app 修改复选框checkbox选中后背景和字体颜色

编写css&#xff08;注意&#xff1a;这个样式必须写在App.vue里&#xff09; /* 复选框 */ /* 复选框-圆角 */ checkbox.checkbox-round .wx-checkbox-input, checkbox.checkbox-round .uni-checkbox-input {border-radius: 100rpx; } /* 复选框-背景颜色 */ checkbox.checkb…

STM32完全学习——系统时钟设置

一、时钟框图的解读 首先我们知道STM32在上电初始化之后使用的是内部的HSI未经过分频直接通过SW供给给系统时钟&#xff0c;由于内部HSI存在较大的误差&#xff0c;因此我们在系统完成上电初始化&#xff0c;之后需要将STM32的时钟切换到外部HSE作为系统时钟&#xff0c;那么我…