代码语言：html

所属分类：其他

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

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

代码标签： three 三维 国庆节 快乐 特效 代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#070402">
<title>国庆快乐 · 天安门盛典</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Noto+Serif+SC:wght@400;600;900&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#d9ab5c; --gold-hi:#f2d9a6; --gold-dim:#8f7345;
  --ink:#070402; --paper:#f0e2c8; --red:#b03024;
  --serif:'Noto Serif SC','Songti SC','SimSun',serif;
  --en:'Cormorant Garamond',Georgia,serif;
}
*{margin:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--ink);overflow:hidden;font-family:var(--serif);-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;z-index:1}
#stage canvas{display:block}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 42%,transparent 46%,rgba(2,1,0,.62) 100%)}
#grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}

@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── 左上题字 ── */
#brand{position:fixed;left:44px;top:38px;z-index:5;pointer-events:none;transition:opacity .7s}
body.cinema #brand{opacity:0}
.brand-in{animation:fadeup 1.1s ease .45s both}
.ming-wrap{display:flex;align-items:flex-start;gap:14px}
.ming{font-size:78px;font-weight:900;line-height:1.05;letter-spacing:.04em;
  background:linear-gradient(168deg,#ffe9b8 8%,#e8b05e 45%,#a8542c 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(255,170,80,.3))}
.seal{width:34px;height:34px;background:var(--red);color:#f7e7cf;font:600 18px/34px var(--serif);
  text-align:center;border-radius:4px;margin-top:8px;transform:rotate(2deg);
  box-shadow:0 0 0 1px rgba(247,231,207,.4) inset,0 4px 18px rgba(176,48,36,.5)}
.tagline{margin-top:12px;font:600 21px var(--serif);color:#e8cfa0;letter-spacing:.46em}
.tagline-en{margin-top:7px;font:600 10px var(--en);color:#8f7345;letter-spacing:.3em}
.rule{width:224px;height:1px;margin:15px 0 12px;background:linear-gradient(90deg,#caa25c,transparent)}
.fact{display:flex;align-items:baseline;gap:10px}
.fact-k{font:12px var(--serif);color:#b99a63;letter-spacing:.24em}
.fact-v{font:600 42px/1 var(--en);color:var(--gold-hi);text-shadow:0 0 24px rgba(255,200,110,.35)}
.fact-u{font:600 13px var(--serif);color:#9a7b4a;letter-spacing:.2em}
.fact2{margin-top:9px;font:11px var(--serif);color:var(--gold-dim);letter-spacing:.28em;transition:opacity .3s}
.note{margin-top:6px;font:11px var(--serif);color:#6f5836;letter-spacing:.3em;transition:opacity .3s}

/* ── 顶部小字 / 右上导航 ── */
.topcenter{position:fixed;top:25px;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;
  font:600 10px var(--en);letter-spacing:.42em;color:#7a6238;white-space:nowrap;transition:opacity .7s;
  animation:fadeup 1s ease .8s both}
body.cinema .topcenter{opacity:0}
.topnav{position:fixed;right:44px;top:36px;text-align:right;z-index:5;pointer-events:none;transition:opacity .7s}
body.cinema .topnav{opacity:0}
.topnav .in{animation:fadeup 1s ease .7s both;pointer-events:auto}
.tn-zh{display:block;font:600 15px var(--serif);color:#e8cfa0;letter-spacing:.5em;padding-left:.5em}
.tn-en{display:block;margin-top:5px;font:600 9px var(--en);letter-spacing:.4em;color:var(--gold-dim)}
.tn-links{display:inline-flex;gap:18px;margin-top:13px;font:11px var(--serif);letter-spacing:.3em}
.tn-links a{color:#7a6238;text-decoration:none;cursor:pointer;transition:.3s}
.tn-links a:hover{color:var(--gold-hi)}

/* ── 播放 + 检索胶囊 ── */
.playbar{position:fixed;left:50%;top:46%;transform:translate(-44%,-50%);display:flex;align-items:center;gap:16px;z-index:6}
.playbtn{width:62px;height:62px;border-radius:50%;border:1px solid rgba(242,217,166,.75);
  background:rgba(18,10,4,.42);backdrop-filter:blur(6px);color:var(--gold-hi);cursor:pointer;
  display:grid;place-items:center;position:relative;transition:.35s;animation:fadeup 1s ease 1s both}
.playbtn:hover{transform:scale(1.08);border-color:var(--gold-hi);box-shadow:0 0 26px rgba(255,200,110,.35)}
.playbtn::before{content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(242,217,166,.28);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.82);opacity:.9}70%{transform:scale(1.12);opacity:0}100%{opacity:0}}
.playbtn .i-pause{display:none}
body.cinema .playbtn .i-play{display:none}
body.cinema .playbtn .i-pause{display:block}
body.cinema .playbtn::before{anim.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论