0


HTML+Jquery实现2022跨年烟花特效,跨年怎能没有烟花

📋 前言

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

在这里插入图片描述

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

在这里插入图片描述
以下是正文

一、效果展示

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

在线展示链接:烟花秀

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

全部代码(Html):

<!DOCTYPEhtml><htmllang="zh"><head><title>2022 Happy New Year! ! ! !</title></head><body><divclass="firework-container"><header><h1style="text-align:center">2022 HappyNewYear! ! ! !</h1></header></div><!-- <audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" src="Fire.mp3" ></audio> --><scripttype="text/javascript"src="js/jquery-1.11.0.min.js"></script><scripttype="text/javascript"src="js/jquery.fireworks.js"></script><scripttype="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容器
<divclass="firework-container"></div>
  • 最后初始化插件
$('.demo').fireworks({ 
  sound:false,// 声音效果
  opacity:0.9, 
  width:'100%', 
  height:'100%'});

2、jquery-1.11.0.min.js

3、没了,简单粗暴

四、代码链接

有需要源码的小伙伴可以私信哦!


本文转载自: https://blog.csdn.net/mataojie/article/details/122246299
版权归原作者 不入流程序猿 所有, 如有侵权,请联系我们删除。

“HTML+Jquery实现2022跨年烟花特效,跨年怎能没有烟花”的评论:

还没有评论