📋 前言
- 🖱 博客主页:在下马农的碎碎念
- ✍ 本文由在下马农原创,首发于CSDN
- 📆 首发时间:2021/12/31
- 📅 最近更新时间:2021/01/24
- 🤵 此马非凡马,房星本是星。向前敲瘦骨,犹自带铜声。
- 🙏作者水平有限,如发现错误,请留言轰炸哦!万分感谢!
- 🤗 欢迎关注🔎点赞👍收藏⭐️留言📝先赞后看,腰缠万贯
我用尽了全力,过着平凡的一生。
——《月亮与六便士》
以下是正文
一、效果展示
烟花秀代码已部署上线,点击下方链接即可查看美丽的烟花秀!!!!
在线展示链接:烟花秀
二、不多哔哔,直接上代码
全部代码(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、没了,简单粗暴
四、源代码分享
有需要源码的小伙伴可以扫描下方二维码回复 关键词 烟花!
💝最新文章💝:‼快看我,点点点点点‼
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/4415.html