演示


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>

完整源码

内容太多，放公众号了，自行领取：

公众号：玩转大数据
发送：烟花