2024新年烟花代码完整版

在这里插入图片描述

文章目录

  • 前言
  • 烟花效果展示
  • 使用教程
  • 查看源码
    • HTML代码
    • CSS代码
    • JavaScript
  • 新年祝福

前言

在这个充满希望和激动的2024年，新的一年即将拉开帷幕，而数字科技的创新与发展也如火如荼。烟花绚丽多彩的绽放，一直以来都是新年庆典中不可或缺的元素。

如何利用技术的魔力，创造出炫目绝伦的数字烟花，成为了技术爱好者们所追寻的目标。在这篇技术博客中，我将带领大家探索如何借助代码的魔力，打造出令人惊叹的数字烟花效果，为新年之夜增添一抹绚烂的色彩。让我们一同迎接2024年的到来，用技术的创新为新的一年描绘出绚丽的序曲。

烟花效果展示

烟花样式可以自定义选择，背景音乐选择十分真实的仿烟花声。当你把代码打包发给朋友打开时，新年的氛围在此刻达到了顶峰。也许你在这一年里背井离乡忙于工作，学习，也许你在这一年里过得风生水起，做着喜欢的工作，又或是这一年里，你过的不尽人意，新年到来之时，忘记所有烦恼，在家多陪陪父母，出门和朋友聚会，2024 年我们重头再来！

在这里插入图片描述

使用教程

代码已经打包，点击免费下载使用。无论是你想自己下载研究代码，还是你是小白想发给朋友欣赏，都十分推荐。下面是手把手教学，带你零基础看一场代码带来的浪漫烟花。无法下载请留言。

第一步：下载代码压缩包文件，解压。

在这里插入图片描述

第二步：打开解压好的文件夹，此时可以看到三个文件，如果你想试试效果，双击 .html 后缀的文件在浏览器打开运行即可。

在这里插入图片描述

第三步：如果想研究前端代码，我们可以看一下，文件夹中一共存放了三个文件，分别是：

  • HTML文件
  • CSS文件
  • JavaScript文件

这三个部分便是我们常说的前端三剑客，是前端的基础内容，构成了前端技术栈。其中，HTML负责结构部分，他就像是骨架一样，CSS 又叫层叠样式表，负责页面的美化，还有负责交互逻辑的 JavaScript 。感兴趣的朋友可以看看这篇基础教程文章：一文带你吃透HTML

对于小白来说，网上有很多的教程，可以说是眼花缭乱。这样的方式是不是方便很多呢？不用你新建一个记事本文件。哈哈，重点还是能在代码里学到东西哦，烟花只是为了新年的氛围！！

查看源码

HTML代码

由于文章的篇幅原因，代码只展示一部分示例。HTML 撑起了整个页面的大致框架，不如你想给页面加上一个按钮，一个输入框等等。他是页面的骨架，负责页面的结构部分。

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>HTML5 Canvas超逼真烟花绽放动画</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="icon" type="image/png" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link rel="apple-touch-icon-precomposed" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css"></head>
<body><!-- App -->
<div class="container"><div class="loading-init"><div class="loading-init__header">Loading</div><div class="loading-init__status">Assembling Shells</div></div><div class="stage-container remove"><div class="canvas-container"><canvas id="trails-canvas"></canvas><canvas id="main-canvas"></canvas></div><div class="controls"><div class="btn pause-btn"><svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg></div><div class="btn sound-btn"><svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg></div><div class="btn settings-btn"><svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg></div></div><div class="menu hide"><div class="menu__inner-wrap"><div class="btn btn--bright close-menu-btn"><svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg></div><div class="menu__header">Settings</div><div class="menu__subheader">For more info, click any label.</div><form><div class="form-option form-option--select"><label class="shell-type-label">Shell Type</label><select class="shell-type"></select></div><div class="form-option form-option--select"><label class="shell-size-label">Shell Size</label><select class="shell-size"></select></div><div class="form-option form-option--select"><label class="quality-ui-label">Quality</label><select class="quality-ui"></select></div><div class="form-option form-option--select"><label class="sky-lighting-label">Sky Lighting</label><select class="sky-lighting"></select></div><div class="form-option form-option--select"><label class="scaleFactor-label">Scale</label><select class="scaleFactor"></select></div><div class="form-option form-option--checkbox"><label class="auto-launch-label">Auto Fire</label><input class="auto-launch" type="checkbox" /></div><div class="form-option form-option--checkbox form-option--finale-mode"><label class="finale-mode-label">Finale Mode</label><input class="finale-mode" type="checkbox" /></div><div class="form-option form-option--checkbox"><label class="hide-controls-label">Hide Controls</label><input class="hide-controls" type="checkbox" /></div><div class="form-option form-option--checkbox form-option--fullscreen"><label class="fullscreen-label">Fullscreen</label><input class="fullscreen" type="checkbox" /></div><div class="form-option form-option--checkbox"><label class="long-exposure-label">Open Shutter</label><input class="long-exposure" type="checkbox" /></div></form><div class="credits">Passionately built by <a href="https://cmiller.tech/" target="_blank">Caleb Miller</a>.</div></div></div></div>
</div>
<!-- partial --><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/fscreen%401.0.1.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/Stage%400.1.4.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/MyMath.js'></script><script  src="./script.js"></script></body>
</html>

CSS代码

当然，只使用 HTML 的页面是十分单调的，我们还需要对页面进行美化，此时需要加入 CSS 代码。


.help-modal__overlay {position: absolute;top: 0;bottom: 0;left: 0;right: 0;opacity: 0;transition-property: opacity;transition-timing-function: ease-in;transition-duration: 0.25s;
}
.help-modal__dialog {display: flex;flex-direction: column;align-items: center;max-width: 400px;max-height: calc(100vh - 100px);margin: 10px;padding: 20px;border-radius: 0.3em;background-color: rgba(0, 0, 0, 0.4);opacity: 0;transform: scale(0.9, 0.9);transition-property: opacity, transform;transition-timing-function: ease-in;transition-duration: 0.25s;
}

JavaScript

JavaScript 处理代码的交互逻辑，是十分重要的一部分，也是比较难的一部分。

function toggleSound(toggle) {if (typeof toggle === 'boolean') {store.setState({ soundEnabled: toggle });} else {store.setState({ soundEnabled: !store.state.soundEnabled });}
}function toggleMenu(toggle) {if (typeof toggle === 'boolean') {store.setState({ menuOpen: toggle });} else {store.setState({ menuOpen: !store.state.menuOpen });}
}function updateConfig(nextConfig) {nextConfig = nextConfig || getConfigFromDOM();store.setState({config: Object.assign({}, store.state.config, nextConfig)});configDidUpdate();
}// Map config to various properties & apply side effects
function configDidUpdate() {const config = store.state.config;quality = qualitySelector();isLowQuality = quality === QUALITY_LOW;isNormalQuality = quality === QUALITY_NORMAL;isHighQuality = quality === QUALITY_HIGH;if (skyLightingSelector() === SKY_LIGHT_NONE) {appNodes.canvasContainer.style.backgroundColor = '#000';}Spark.drawWidth = quality === QUALITY_HIGH ? 0.75 : 1;
}

新年祝福

在2024年的新年，祝愿你在全新的一年里，收获更多的快乐、健康和成功。愿你拥有坚定的信念，迈出坚实的步伐，实现自己的梦想，创造更美好的未来。祝你在新的一年里，心想事成，万事顺利，幸福安康，快乐无限！愿2024年充满希望与光明，为你带来无尽的喜悦

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/613388.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

学会这13个 Git 命令就够了！

学会这13个 Git 命令就够了！

提到版本控制工具Git&#xff0c;相信很多开发者都知道&#xff0c;其实我们在99%的日常时间里&#xff0c;只需要学会以下13个git命令就行了&#xff0c;让我们来一起看看吧&#xff01; 1、git init 这个命令是初始化一个新的Git仓库&#xff0c;即在当前目录中创建一个名为…
阅读更多...
为什么伦敦金交易应该使用4小时以上的周期？

为什么伦敦金交易应该使用4小时以上的周期？

做伦敦金前&#xff0c;要先对市场走势进行分析。而分析市场总是涉及时间周期等问题&#xff0c;这也是投资者们存在疑惑的地方。到底我们需要选择什么时间周期呢&#xff1f;各人有个人的看法&#xff0c;而其中一种意见是&#xff0c;我们不应该使用低于4小时的周期&#xff…
阅读更多...
【方差分析原理简介】

【方差分析原理简介】

文章目录 方差分析&#xff08;Analysis of Variance&#xff0c;简称ANOVA&#xff09;1 方差分析流程2 借助sklean进行基于方差分析的特征筛选3 总结 方差分析&#xff08;Analysis of Variance&#xff0c;简称ANOVA&#xff09; 卡方检验更多的会考虑在衡量两个离散变量是…
阅读更多...
【Java技术专题】「攻破技术盲区」攻破Java技术盲点之unsafe类的使用指南（打破Java的安全管控— sun.misc.unsafe）

【Java技术专题】「攻破技术盲区」攻破Java技术盲点之unsafe类的使用指南（打破Java的安全管控— sun.misc.unsafe）

Java后门机制 — sun.misc.unsafe 打破Java的安全管控关于Unsafe的编程建议实例化Unsafe后门对象使用sun.misc.Unsafe创建实例单例模式处理实现浅克隆&#xff08;直接获取内存的方式&#xff09;直接使用copyMemory原理分析 密码安全使用Unsafe类—示例代码 运行时动态创建类超…
阅读更多...
敦煌网、国际站自养号测评：店铺销售怎么提高？

敦煌网、国际站自养号测评：店铺销售怎么提高？

随着互联网的快速发展&#xff0c;电子商务成为了现代商业的重要组成部分。在众多电商平台中&#xff0c;敦煌网作为中国文化艺术产品的专业电商平台&#xff0c;吸引了大量消费者的关注。然而&#xff0c;如何提高敦煌网的销售业绩&#xff0c;成为了商家们共同面临的挑战。 …
阅读更多...
diffusers加速文生图速度；stable-diffusion、PixArt-α

diffusers加速文生图速度；stable-diffusion、PixArt-α

参考： https://pytorch.org/blog/accelerating-generative-ai-3/ https://colab.research.google.com/drive/1jZ5UZXk7tcpTfVwnX33dDuefNMcnW9ME?usp=sharing#scrollTo=jueYhY5YMe22 大概GPU资源8G-16G；另外模型资源下载慢可以在国内镜像：https://aifasthub.com/ 1、加速…
阅读更多...
查看Linux磁盘空间

查看Linux磁盘空间

(1)、该命令会列出当前系统所有挂载的文件系统以及它们的使用情况&#xff0c;包括总容量、已用空间、可用空间、使用百分比等信息 df -h如果查看某一个文件夹的,可以 df -h folderName (2)、计算指定目录下所有文件和子目录所占用的磁盘空间大小&#xff0c;并以人类可读的格…
阅读更多...
机器学习周刊 第4期：动手实战人工智能、计算机科学热门论文、免费的基于ChatGPT API的安卓端语音助手、每日数学、检索增强 (RAG) 生成技术综述

机器学习周刊 第4期：动手实战人工智能、计算机科学热门论文、免费的基于ChatGPT API的安卓端语音助手、每日数学、检索增强 (RAG) 生成技术综述

LLM开发者必读论文&#xff1a;检索增强&#xff08;RAG&#xff09;生成技术综述&#xff01; 目录&#xff1a; 1、动手实战人工智能 Hands-on Al2、huggingface的NLP、深度强化学习、语音课3、Awesome Jupyter4、计算机科学热门论文5、LLM开发者必读论文:检索增强 (RAG) 生…
阅读更多...
Python基础（二十四、JSON和pyecharts）

Python基础（二十四、JSON和pyecharts）

文章目录 一、JSON1.JSON介绍2.JSON格式数据转化3.示例 二、pyecharts1.安装pyecharts包2.查看官方示例 三、开发示例 一、JSON 1.JSON介绍 JSON是一种轻量级的数据交互格式&#xff0c;采用完全独立于编程语言的文本格式来存储和表示数据&#xff08;就是字符串&#xff09;…
阅读更多...
探索未来餐饮：构建创新连锁餐饮系统的技术之旅

探索未来餐饮：构建创新连锁餐饮系统的技术之旅

随着数字化时代的发展&#xff0c;连锁餐饮系统的设计和开发不再仅仅关乎订单处理&#xff0c;更是一场充满技术创新的冒险。在本文中&#xff0c;我们将深入研究连锁餐饮系统的技术实现&#xff0c;带你探索未来餐饮业的数字化美食之旅。 1. 构建强大的后端服务 在设计连锁…
阅读更多...
计算机网络-2021期末考试解析

计算机网络-2021期末考试解析

【前言】 这个是计算机网络的正式试卷了。从形式上基本上跟今年考的一致。很具有参考性。 一、 简答题&#xff08;30 分&#xff0c;每题 5 分&#xff09; 1 、电路交换与分组交换各有什么优缺点&#xff1f;第 4 代蜂窝系统 -4G 采用的是全 IP 体系&#xff0c;这说明…
阅读更多...
iPad Pro如何使用SSH远程连接服务器云端编程开发【内网穿透】

iPad Pro如何使用SSH远程连接服务器云端编程开发【内网穿透】

文章目录 1. 在iPad下载Code APP2.安装cpolar内网穿透2.1 cpolar 安装2.2 创建TCP隧道 3. iPad远程vscode4. 配置固定TCP端口地址4.1 保留固定TCP地址4.2 配置固定的TCP端口地址4.3 使用固定TCP地址远程vscode 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 …
阅读更多...
HubSpot能不能对接Facebook？

HubSpot能不能对接Facebook？

在数字化时代&#xff0c;企业如何更有效地整合关键平台&#xff0c;实现全面运营是业务发展的重要议题。今天将聚焦于探讨HubSpot与Facebook的整合可能性&#xff0c;通过强调MessageBox对接各大系统的能力&#xff0c;揭示这一整合如何解锁商业潜力。 HubSpot与Facebook的数字…
阅读更多...
生成学习全景：从基础理论到GANs技术实战

生成学习全景：从基础理论到GANs技术实战

本文全面探讨了生成学习的理论与实践&#xff0c;包括对生成学习与判别学习的比较、详细解析GANs、VAEs及自回归模型的工作原理与结构&#xff0c;并通过实战案例展示了GAN模型在PyTorch中的实现。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产…
阅读更多...
低代码的应用场景

低代码的应用场景

Gartner 在 2019 年的低代码调研报告中&#xff0c;曾经绘制过一张用来阐述低代码适用场景的“应用金字塔”&#xff0c;如下图所示&#xff1a; 应用级别划分&#xff1a;从下往上&#xff0c;分别为工作组级(Workgroup Class)、部门级(Departmental Class)、企业级(Enterpris…
阅读更多...
新书速览||数字空间驱动智能建造

新书速览||数字空间驱动智能建造

聚焦建筑企业高涨的数字化需求&#xff0c;探讨数字化转型背景下的智能建造与数据要素工程化应用 本书内容 面对复杂的内外部环境与百年未有的大变局&#xff0c;个性化制造特征突出又规模巨大的中国建筑业&#xff0c;亟待充分利用数据资源这一生产要素&#xff0c;优化资源配…
阅读更多...
重建传播网络并识别隐藏来源

重建传播网络并识别隐藏来源

1.摘要 我们从数据中揭示复杂网络结构和动态的能力&#xff0c;对于理解和控制复杂系统中的集体动态至关重要。尽管在这一领域已有近期进展&#xff0c;但如何从有限的时间序列中重建具有随机动态过程的网络仍然是一个突出问题。在这里&#xff0c;我们开发了一个基于压缩感知的…
阅读更多...
用于生成信息提取的大型语言模型综述

用于生成信息提取的大型语言模型综述

论文地址&#xff1a;https://arxiv.org/pdf/2312.17617.pdf 代码仓库&#xff1a;https://github.com/quqxui/Awesome-LLM4IE-Papers 信息抽取&#xff08;IE&#xff09;旨在从纯自然语言文本中提取结构化知识&#xff08;如实体、关系和事件&#xff09;。最近&#xff0c…
阅读更多...
JSON Crack数据可视化工具结合内网穿透实现公网访问

JSON Crack数据可视化工具结合内网穿透实现公网访问

文章目录 1. 在Linux上使用Docker安装JSONCrack2. 安装Cpolar内网穿透工具3. 配置JSON Crack界面公网地址4. 远程访问 JSONCrack 界面5. 固定 JSONCrack公网地址 JSON Crack 是一款免费的开源数据可视化应用程序&#xff0c;能够将 JSON、YAML、XML、CSV 等数据格式可视化为交互…
阅读更多...
什么是多态？

什么是多态？

多态是方法的多态&#xff0c;属性没有多态 多态存在父子之间 父类与子类之间要有联系&#xff0c;没有联系则会出现异常 --- String 与 Person 本质&#xff1a;父类引用指向子类对象 --- Person son new Son(); 如何构成多态&#xff1f; 建立父子类 子类重写父类方法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023