HTML+Jquery实现2022跨年烟花特效,除夕最炫烟花代码,跨年怎能没有烟花
2022-01-29 15:59:55
163次阅读
0个评论


📋 前言
🖱 博客主页:在下马农的碎碎念
✍ 本文由在下马农原创,首发于CSDN
📆 首发时间:2021/12/31
📅 最近更新时间:2021/01/24
🤵 此马非凡马,房星本是星。向前敲瘦骨,犹自带铜声。
🙏作者水平有限,如发现错误,请留言轰炸哦!万分感谢!
🤗 欢迎关注🔎点赞👍收藏⭐️留言📝先赞后看,腰缠万贯
————————————————


image.png



我用尽了全力,过着平凡的一生。
——《月亮与六便士》

以下是正文

一、效果展示

烟花秀代码已部署上线,点击下方链接即可查看美丽的烟花秀!!!!

在线展示链接:烟花秀

二、不多哔哔,直接上代码

全部代码(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、没了,简单粗暴
四、源代码分享
有需要源码的小伙伴可以私信哦!

收藏 0 0

登录 后评论。没有帐号? 注册 一个。

admin

官方人员
  • 0 回答
  • 0 粉丝
  • 0 关注