HTML+Jquery實現2022跨年煙花特效，跨年怎能沒有煙花

📋 前言

🖱 部落格主頁：在下馬農的碎碎念
✍ 本文由在下馬農原創，首發於CSDN
📆 首發時間：2021/12/31
📅 最近更新時間：2021/12/31
🤵 此馬非凡馬，房星本是星。向前敲瘦骨，猶自帶銅聲。
🙏作者水平有限，如發現錯誤，請留言轟炸哦！萬分感謝！
🤗 歡迎關注🔎點贊👍收藏⭐️留言📝先贊後看，腰纏萬貫

在這裡插入圖片描述

我用盡了全力，過著平凡的一生。
——《月亮與六便士》

在這裡插入圖片描述
以下是正文

一、效果展示

煙花秀程式碼已部署上線，點選下方連結即可檢視美麗的煙花秀！！！！

線上展示連結：煙花秀

二、不多嗶嗶，直接上程式碼

全部程式碼（Html）:

<!DOCTYPE html>
<html lang="zh">
<head><title>2022 Happy New Year! ! ! !</title></head>
<body>
	<div class="firework-container" >
		<header>
			<h1 style = "text-align:center">2022 HappyNewYear! ! ! !</h1>
		</header>
	</div>
	<!-- <audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="Fire.mp3" ></audio> -->
	<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="js/jquery.fireworks.js"></script>
	<script type="text/javascript">
		$('.firework-container').fireworks({ 
		  sound: false, // sound effect
		  opacity: 0.9, 
		  width: '100%', 
		  height: '100%' 
		});
	</script>
</body>
</html>

三、需要的檔案

1、 jquery.fireworks.js

外掛描述：jquery-fireworks.js是一款基於HTML5 Canvas的逼真煙花特效jQuery外掛。該外掛使用簡單，並可自由進行設定。它可以在一個div容器中生成逼真的燃放煙花效果。

使用方法：

在頁面引入jquery和jquery.fireworks.js檔案。

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.fireworks.js"></script>

在頁面放一個div容器

<div class="firework-container" >
</div>

最後初始化外掛

$('.demo').fireworks({ 
  sound: false, // 聲音效果
  opacity: 0.9, 
  width: '100%', 
  height: '100%'
});

2、jquery-1.11.0.min.js

3、沒了，簡單粗暴

四、程式碼連結

有需要原始碼的小夥伴可以私信哦！