文章目录

• 前言
• 效果展示
• 使用方法
• 源码学习
• • HTML代码
  • CSS代码

前言

时光荏苒，白驹过隙。2022这一年又在忙碌中度过了，过去的一年，我们同努力，我们共欢笑，每一次成功都蕴藏着我们辛勤的劳动。

新的一年即将来到，我们不能停滞不前，一味只是骄傲。愿大家与时俱进，拼搏不懈，共创新的辉煌！

借着新年到来的喜庆，给大家分享一个新年烟花的前端代码，快拿着代码展示给你的朋友们看吧！！

效果展示

文末有完整代码，只需要下载压缩包，解压运行即可。接下来我们一起来看完整教程吧。

烟花的样式既可以是随机的，也可以自定义，风格样式齐全。搭配烟花燃放时的音乐，新年的氛围在此刻达到了顶峰！快和你的小伙伴一起分享这份快乐吧。

使用方法

代码已经打包，想下载学习的小伙伴：免费下载

第一步：首先，下载压缩包，解压后我们就可以看到下面这样一个文件夹。

第二步：打开文件夹，此时我们可以看到文件夹里有三个文件。

不要着急，我们先来看看文件夹里都有什么吧，首先是 HTML 文件，负责这个程序的主要结构，其次是样式表文件 CSS ，还有一个就是代码的逻辑部分JavaScrirt。

第三步：点击第一个文件 index.html ，双击运行，此时我们就可以拿着程序展示给小伙伴啦，别忘了打开声音特效哦。

对于小白来说，是不是比桌面新建一个文本文档的方法友好多了呢？其实我们就是为了新年这场美好的氛围，快和你的朋友来一场线上烟花吧！

源码学习

当然，对于学习前端的小伙伴，我们不光要看一场绚丽的烟花，还要学习代码为什么要这么写喽，接下来我们一起来看一看吧！

HTML代码

HTML 就像骨头一样，撑起了整个页面的大致框架，比如左边需要一个输入框，右边需要一个按钮之类的，都可以用HTML来实现。

Loading
Assembling Shells
Settings
For more info, click any label.
Shell Type
Shell Size
Quality
Sky Lighting
Scale
Auto Fire
Finale Mode
Hide Controls
Fullscreen
Open Shutter
Passionately built by Caleb Miller.
Close

CSS代码

HTML实现出来的样式是比较单调的，而CSS实现了美化的效果。

* {position: relative;box-sizing: border-box;
}html,
body {height: 100%;
}html {background-color: #000;
}body {overflow: hidden;color: rgba(255, 255, 255, 0.5);font-family: "Russo One", arial, sans-serif;line-height: 1.25;letter-spacing: 0.06em;
}.hide {opacity: 0;visibility: hidden;
}.remove {display: none !important;
}.blur {filter: blur(12px);
}.container {height: 100%;display: flex;justify-content: center;align-items: center;
}.loading-init {width: 100%;align-self: center;text-align: center;text-transform: uppercase;
}
.loading-init__header {font-size: 2.2em;
}
.loading-init__status {margin-top: 1em;font-size: 0.8em;opacity: 0.75;
}.stage-container {overflow: hidden;box-sizing: initial;border: 1px solid #222;margin: -1px;
}

JavaScript 代码实现了与用户的交互逻辑，由于代码比较长，就不再展示啦。

烟花绚烂人欢笑，饭菜飘香幸福绕。祝大家身体健康，万事如意！