演示
2022跨年烟花演示
我的b站：川川菜鸟
演示链接：跨年烟花
部分代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!--<embed src="mp3/blank.mp3" hidden="true" autostart="true" loop="true">-->
<link rel="stylesheet" href="css/style.css" />
<script
id="jqbb"
src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"
></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
user-select: none;
margin: 0;
}
.city {
width: 100%;
position: fixed;
bottom: 0px;
z-index: 100;
}
.city img {
width: 100%;
}
audio {
opacity: 0;
}
.shape {
z-index: 9999 !important;
}
</style>
<title>2021新年快乐</title>
<!-- 弹窗样式 -->
<link href="modal.css" rel="stylesheet" />
</head>
<body onselectstart="return false">
<div class="star comet"></div>
<script src="js/index.js"></script>
<!--烟花部分-->
<canvas id="cas" style="background-color: rgba(0, 5, 24, 1); z-index: 9999">
浏览器不支持canvas
</canvas>
<div class="city">
<img src="img/city.png" alt="" />
</div>
<img src="img/moon.png" alt="" id="moon" style="visibility: hidden" />
<div style="display: none">
<div class="shape">🏮2022新年快乐</div>
<div class="shape">🏮恭喜发财</div>
<div class="shape">🏮万事如意</div>
<!-- <div class="shape"><img src="01.png" alt="" /></div> -->
<!-- <div class="shape"><img src="01.png" alt="" /></div> -->
<div class="shape"><img src="./assets/img/01.png" alt="" /></div>
<div class="shape"><img src="./assets/img/01.png" alt="" /></div>
<div class="shape"><img src="./assets/img/02.png" alt="" /></div>
<!-- <div class="shape">💘💘💘</div> -->
</div>
<!--音乐部分/可替换-->
<!--<audio autoplay loop id="music">
<source src="mp3/blank.mp3" />
</audio>-->
<iframe
id="iframMusic"
allow="autoplay"
style="display: none"
src="mp3/blank.mp3"
></iframe>
<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
</body>
</html>
完整源码
内容太多，放公众号了，自行领取：
公众号：川川菜鸟
发送：2022跨年
