2025新春烟花代码（二）HTML5实现孔明灯和烟花效果

A雄

已于 2025-01-09 15:49:59 修改

阅读量6.5k

点赞数 55

CC 4.0 BY-SA版权

分类专栏： 2025跨年烟花代码文章标签： html javascript 前端

于 2025-01-08 16:23:14 首次发布

本文链接：https://blog.csdn.net/u013343616/article/details/145012092

效果展示

在这里插入图片描述

源代码

<!DOCTYPE html>
<html lang="en">
<script>
  var _hmt = _hmt || [];
  (function () {
     
     
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?45f95f1bfde85c7777c3d1157e8c2d34";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
</script>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>炸弹爆炸和烟花效果</title>
  <style>
    /* 夜空背景 */
    body, html {
     
     
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #000;
    }

    /* 星空背景 */
    .starry-background {
     
     
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at bottom, #001025, #000000);
      z-index: -1;
    }

    .stars {
     
     
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('https://i.imgur.com/3Zv2v1m.png') repeat;
      opacity: 0.5;
      animation: twinkle 5s infinite alternate;
    }

    @keyframes twinkle {
     
     
      from {
     
     
        opacity: 0.3;
      }
      to {
     
     
        opacity: 0.7;
      }
    }

    /* 孔明灯样式 */
    .lantern {
     
     
      position: absolute;
      width: 30px