👉文末查看项目完整源码
支持定制，文案、霓虹字背景音乐均可替换，博主可以帮你制作成网址链接或者二维码形式哟，你可以直接通过微信或者qq等社交工具发给你的她（他）查看哟！
话不多说先奉上效果视频：
新年元旦跨年浪漫烟花html代码，为你的TA准备惊喜礼物吧！
运行效果图：
部分代码： （👉文末查看项目完整源码）
<!DOCTYPE html><!-- This web page is copied by "https://bazhan.wang" --><!-- This web page is copied by "https://bazhan.wang" --><html lang="en"><head><meta name="360-analysis-id" content="302u1c2z312u2q"><!--!--><meta charset="utf-8"><!--!--><meta name="360-analysis-id" content="2y352v1d1h361c2v"><!--!--><!--!--><!--!-->
<title>💥新年快乐💥</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"><!--!-->
<body>
<!-- clickMusic() -->
<img id="music_ico" onclick="" alt="" style=" display: inline; float: right; ">
<audio id="audioDom" src="media/the.mp3" preload="auto" loop="loop"></audio>
<div id="wish_text"></div>
<div id="yhBtn" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:19999;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff ; font-size:15px">
<p>💥点爆</p>
<img style="width:64px;margin-bottom:24px " src="img/060990dac854444ab7a927b5b3311fe4~tplv-tt-shrink_640_0.png">
</div>
<!-- App -->
<div class="container">
<div class="loading-init">
<div class="loading-init__header"></div>
<div class="loading-init__status"></div>
</div>
<div class="stage-container remove">
<div class="page_two hide">
<div class="type_words" id="contents"></div>
</div>
<div class="canvas-container">
<canvas id="trails-canvas"></canvas>
<canvas id="main-canvas"></canvas>
</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 xlink:href="#icon-close"></use>
</svg>
</div>
<div class="menu__header">设置</div>
<!--<div class="menu__subheader"><br>云-->
<!--</div>-->
<form>
<div class="form-option form-option--select">
<label class="shell-type-label">烟花类型</label>
<select class="shell-type"></select>
</div>
<div class="form-option form-option--select">
<label class="shell-size-label">烟花大小</label>
<select class="shell-size"></select>
</div>
<div class="form-option form-option--select">
<label class="quality-ui-label">画质</label>
<select class="quality-ui"></select>
</div>
<div class="form-option form-option--select">
<label class="sky-lighting-label">天空照明</label>
<select class="sky-lighting"></select>
</div>
<div class="form-option form-option--select">
<label class="scaleFactor-label">规模</label>
<select class="scaleFactor"></select>
</div>
<div class="form-option form-option--checkbox">
<label class="auto-launch-label">自动发射</label>
<input class="auto-launch" type="checkbox">
</div>
<div class="form-option form-option--checkbox form-option--finale-mode">
<label class="finale-mode-label">结局模式</label>
<input class="finale-mode" type="checkbox">
</div>
<div class="form-option form-option--checkbox">
<label class="hide-controls-label">隐藏控制器</label>
<input class="hide-controls" type="checkbox">
</div>
<div class="form-option form-option--checkbox form-option--fullscreen">
<label class="fullscreen-label">全屏</label>
<input class="fullscreen" type="checkbox">
</div>
<div class="form-option form-option--checkbox">
<label class="long-exposure-label">打开快门</label>
<input class="long-exposure" type="checkbox">
</div>
</form>
</div>
</div>
</div>
<div class="help-modal">
<div class="help-modal__overlay"></div>
<div class="help-modal__dialog">
<div class="help-modal__header"></div>
<div class="help-modal__body"></div>
<button type="button" class="help-modal__close-btn">关闭</button>
</div>
</div>
</div>
</body><!--!--><!--!--></html><!--!--><!--!-->👇 大家点赞、收藏、评论啦 👇🏻获取方式