演示
<iframe id="uMXjmzJV-1640970408049" src="https://player.bilibili.com/player.html?aid=977737297" allowfullscreen="true" data-mediaembed="bilibili"></iframe>
2022跨年煙花演示
基于b站的視頻修改了一點點，演示：抖音演示
我的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跨年
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/400592.html
標籤：其他
上一篇：包看包會的變數與資料型別
下一篇：【3】案例：Bootstrap + jQuery及DataTables + Python Flask框架開發 - 賬號管理模塊（增刪改查）零基礎入門版