three做个三维中秋节快乐场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

代码描述：中秋节快乐

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>中秋夜 · 花好月圆 | 烟花动画</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#02030a}
body{font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;-webkit-tap-highlight-color:transparent}
canvas{display:block}
#vig{position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 100%)}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity 2s ease .3s}
#hud.show{opacity:1}

.title{position:absolute;left:5.5vw;top:6.5vh}
.title h1{font-size:clamp(34px,6.6vw,82px);font-weight:700;letter-spacing:.2em;line-height:1.1;
  background:linear-gradient(180deg,#fffbe8 0%,#ffe6a7 35%,#f0b95e 70%,#c98b34 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,190,90,.35))}
.title .sub{margin-top:14px;font-size:clamp(12px,1.5vw,19px);letter-spacing:.36em;color:#e9d9b6;opacity:.82}
.title .sub b{color:#ffd98a;font-weight:400}
.seal{display:inline-block;margin-top:20px;padding:7px 10px;background:linear-gradient(160deg,#c0392b,#8e1d1d);
  color:#ffe9c9;font-size:clamp(11px,1.2vw,15px);letter-spacing:.28em;border-radius:3px;
  box-shadow:0 0 18px rgba(192,57,43,.45);transform:rotate(-2deg);writing-mode:vertical-rl}

.poem{position:absolute;right:4.4vw;top:12vh;writing-mode:vertical-rl;
  font-size:clamp(14px,1.7vw,23px);letter-spacing:.42em;color:#cfe0ff;opacity:.42;
  text-shadow:0 0 16px rgba(120,170,255,.45)}

.panel{position:absolute;left:50%;bottom:4.2vh;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;padding:12px 18px;pointer-events:auto;
  background:rgba(10,16,38,.42);border:1px solid rgba(255,214,140,.22);border-radius:40px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 8px 40px rgba(0,0,0,.5)}
.panel button{cursor:pointer;border:1px solid rgba(255,214,140,.3);background:rgba(255,205,120,.1);
  color:#ffe6b4;font-family:inherit;font-size:14px;letter-spacing:.12em;padding:8px 16px;border-radius:24px;
  transition:.25s}
.panel button:hover{background:rgba(255,205,120,.26);box-shadow:0 0 18px rgba(255,190,90,.35)}
.panel button.on{background:rgba(255,190,90,.32);color:#fff}
.sl{display:flex;align-items:center;gap:9px;color:#e6d6b3;font-size:13px;letter-spacing:.1em}
input[type=range]{-webkit-appearance:none;width:104px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#ffd479,#7a5a22);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:#ffe9b8;box-shadow:0 0 10px rgba(255,200,110,.9);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#ffe9b8;cursor:pointer}

.hint{position:absolute;left:50%;bottom:calc(4.2vh + 74px);transform:translateX(-50%);
  font-size:12.5px;letter-spacing:.28em;color:#cfe0ff;opacity:.45;white-space:nowrap}
#load{position:fixed;inset:0;z-index:50;background:#02030a;display:flex;align-items:center;justify-content:center;
  color:#ffe6b4;letter-spacing:.5em;font-size:15px;transition:opacity 1.2s}
#load.hide{opacity:0;pointer-events:none}
@media (max-width:760px){.poem{display:none}.hint{bottom:calc(4.2vh + 66px);font-size:11px}}
</style>
</head>
<body>
<div id="load">月 亮 升 起 中 …</div>
<div id="vig"></div>
<div id="hud">
  <div class="title">
    <h1>花好月圆</h1>
    <div class="sub">中 秋 佳 节 · <b>但 愿 人 长 久</b> · 千 里 共 婵 娟</div>
    <div class="seal">中秋</div>
  </div>
  <div class="poem">明月几时有<br>把酒问青天</div>
  <div class=&q.........完整代码请登录后点击上方下载按钮下载查看