three做个三维国庆节快乐特效代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由deepseek-4.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维国庆节快乐

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>国庆 · 天安门 — 三维线框建筑展示</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{width:100%;height:100%;overflow:hidden;background:#05050a;}
  #app{position:fixed;inset:0;}
  canvas{display:block;}

  .ui{
    position:fixed;inset:0;pointer-events:none;
    color:#f0d9a8;
    font-family:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
    user-select:none;
  }

  /* ---------- 左侧信息面板 ---------- */
  .panel-left{
    position:absolute;left:6.5vw;top:12vh;
    animation:fadeUp 1.4s cubic-bezier(.22,.9,.3,1) both .3s;
  }
  .title-row{display:flex;align-items:flex-start;gap:14px;}
  .big-char{
    font-size:104px;line-height:.9;font-weight:600;letter-spacing:4px;
    color:#ffe6b0;
    text-shadow:
      0 0 18px rgba(255,190,90,.65),
      0 0 52px rgba(255,90,40,.38);
  }
  .seal{
    margin-top:6px;
    width:38px;height:38px;flex:0 0 38px;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;line-height:1;
    color:#ffb877;
    border:1.4px solid rgba(255,110,60,.85);
    border-radius:4px;
    box-shadow:0 0 14px rgba(255,80,40,.55), inset 0 0 10px rgba(255,90,40,.22);
    background:rgba(140,30,10,.22);
  }
  .subtitle{
    margin-top:20px;
    font-size:25px;letter-spacing:9px;
    color:#f2d59c;
    text-shadow:0 0 14px rgba(255,160,70,.42);
  }
  .latin{
    margin-top:11px;
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:10px;letter-spacing:4.2px;
    color:rgba(226,193,140,.52);
  }
  .divider{
    margin:20px 0 16px;
    width:132px;height:1px;
    background:linear-gradient(90deg,rgba(255,190,110,.9),rgba(255,90,40,.35),rgba(255,190,110,0));
  }
  .stat{display:flex;align-items:baseline;gap:14px;}
  .stat .label{font-size:14px;letter-spacing:4px;color:rgba(238,210,160,.92);}
  .stat .value{
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:15px;letter-spacing:2px;
    color:#ffdda4;
    text-shadow:0 0 10px rgba(255,190,90,.65);
  }
  .stat-sub{
    margin-top:8px;
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:9px;letter-spacing:2.6px;
    color:rgba(226,193,140,.40);
  }

  /* ---------- 右下角年份 ---------- */
  .year{
    position:absolute;right:8vw;bottom:12vh;
    text-align:right;
    animation:fadeUp 1.6s cubic-bezier(.22,.9,.3,1) both .8s;
  }
  .year .y-main{
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:44px;font-weight:300;letter-spacing:6px;
    color:rgba(255,230,180,.95);
    text-shadow:0 0 24px rgba(255,150,60,.65);
  }
  .year .y-sub{
    margin-top:6px;
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:10px;letter-spacing:8px;
    color:rgba(255,140,70,.75);
  }

  /* ---------- 顶部小字 ---------- */
  .top-meta{
    position:absolute;left:50%;top:4.2vh;transform:translateX(-50%);
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:9px;letter-spacing:5px;
    color:rgba(226,193,140,.38);
    white-space:nowrap;
    animation:fadeUp 1.6s cubic-bezier(.22,.9,.3,1) both 1.1s;
  }

  /* ---------- 底部装饰刻度 ---------- */
  .bottom-bar{
    position:absolute;left:6.5vw;right:6.5vw;bottom:5.5vh;
    display:flex;align-items:center;gap:16px;
    animation:fadeUp 1.6s cubic-bezier(.22,.9,.3,1) both 1.3s;
  }
  .bottom-bar .line{
    flex:1;height:1px;
    background:linear-gradient(90deg,rgba(255,190,110,.48),rgba(255,90,40,.20),rgba(255,190,110,.05));
  }
  .bottom-bar .tick{
    font-family:"Helvetica Neue",Arial,sans-serif;
    font-size:8px;letter-spacing:3.4px;
    color:rgba(226,193,140,.36);
  }

  /* ---------- 四角装饰 ---------- */
  .corner{
    position:absolute;width:26px;height:26px;
    border-color:rgba(255,150,80,.34);
    border-style:solid;border-width:0;
  }
  .corner.tl{left:3.2vw;top:3.2vh;border-left-width:1px;border-top-width:1px;}
  .corner.tr{right:3.2vw;top:3.2vh;border-right-width:1px;border-top-width:1px;}
  .corner.bl{left:3.2vw;bottom:3.2vh;border-left-width:1px;border-bottom-width:1px;}
  .corner.br{right:3.2vw;bottom:3.2vh;border-right-width:1px;border-bottom-width:1px;}

  /* ---------- 提示 ---------- */
  .hint{
    position:absolute;left:50%;bottom:6.5vh;transform:transl.........完整代码请登录后点击上方下载按钮下载查看