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

server/2024/11/19 15:10:04/

目录

图片展示

完整代码

关键点解释


图片展示

完整代码

<!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/server/143218.html

相关文章

x-cmd pkg | helix - 用 Rust 打造的文本编辑器,内置 LSP 和语法高亮,兼容 Vim 用户习惯

目录 简介快速上手安装使用 功能特点竞品和相关项目进一步阅读 简介 helix 是用 Rust 开发的文本编辑器&#xff0c;以 Modal editing&#xff08;模态编辑&#xff09;为核心特性&#xff0c;类似于 Vim。它结合了经典的 Vim 模式编辑和现代开发工具的特性&#xff08;如 LSP…

OpenSSL 自签名

参考文档&#xff1a;unigui开发人员工作手册2021 参考文章&#xff1a;保姆级OpenSSL下载及安装教程-CSDN博客 下载 Win32/Win64 OpenSSL Installer for Windows - Shining Light Productions 进入后向下拉找到下载位置&#xff0c;建议下载二进制版本的精简版&#xff0c…

SpringBoot整合Email 邮件发送详解

文章目录 SpringBoot整合Email 邮件发送详解一、引言二、邮件发送需要的配置1、获取客户端授权码163邮箱授权码获取QQ邮箱授权码获取 2、SpringBoot配置SMTP服务 SpringBoot整合Email 邮件发送详解一、引言二、环境准备与配置1、依赖配置2、配置文件设置163邮箱配置示例QQ邮箱配…

MATLAB和Python激发光谱

激发光谱是一种用于研究物质发光特性的分析方法。当样品吸收特定波长的光时&#xff0c;电子从基态跃迁至激发态。随后&#xff0c;当电子返回基态时&#xff0c;会发射出光子&#xff0c;产生荧光或磷光。激发光谱通过测量不同波长的入射光激发下的发光强度来获取数据。该技术…

基于FastAPI实现本地大模型API封装调用

关于FastAPI FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Python Web 框架&#xff0c;用于构建基于标准 Python 类型提示的 API。它以简洁、直观和高效的方式提供工具&#xff0c;特别适合开发现代 web 服务和后端应用程序。 问题&#xff1a;_pad() got an un…

2024-11-16----Android 11(全志H713)-----拉高LED灯

需求 屏背光亮起来的时候&#xff0c;LED灯 黄灯灭 绿灯亮 找到屏操作背光的驱动文件&#xff1a; longan/brandy/brandy-2.0/u-boot-2018/drivers/video/sunxi/fastlogo/fastlogo.c写下操作LED灯的方法&#xff0c;在合适的地方调用 #define setbit(x,y) x|(1<<y) …

Android Framework AMS面试题及参考答案

目录 什么是 AMS? AMS 在 Android 系统中的作用? AMS 是如何启动的? Zygote、SystemServer 与 AMS 之间的关系? AMS 如何与其他系统服务(如 PackageManagerService、WindowManagerService、WMS)交互? AMS 如何使用 Binder 完成通信? AMS 如何管理系统服务的启动…

【自学笔记】无监督学习

文章目录 简述聚类 &#xff08;Cluster learning&#xff09;K-means 异常检测密度估计一些技巧 简述 无监督学习&#xff08;Unsupervised Learning&#xff09;是机器学习的一种方法&#xff0c;其特点是不依赖于事先标记的训练数据。在无监督学习中&#xff0c;算法尝试直接…