three三维三维山坡上的寺庙场景代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash 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>
<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=Noto+Serif+SC:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  * { margin:0; padding:0; box-sizing:border-box; }
  html, body { height:100%; overflow:hidden; background:#0a0c10;
    font-family:'Noto Serif SC','Songti SC',serif; -webkit-font-smoothing:antialiased; }
  canvas { display:block; }

  /* 电影感暗角与颗粒 */
  #vignette { position:fixed; inset:0; pointer-events:none; z-index:5;
    background:radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(6,8,12,.48) 100%); }
  #grain { position:fixed; inset:0; pointer-events:none; z-index:6; opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* 竖排标题 */
  #title { position:fixed; top:36px; left:32px; z-index:10; color:#f3ecdd;
    display:flex; gap:16px; align-items:flex-start;
    opacity:0; animation:fadeUp 1.8s 1.1s forwards; }
  #title h1 { writing-mode:vertical-rl; font-size:clamp(30px,4.4vw,46px);
    font-weight:600; letter-spacing:.4em; line-height:1;
    text-shadow:0 2px 22px rgba(0,0,0,.6); }
  #title .side { display:flex; flex-direction:column; gap:14px; padding-top:4px; }
  .seal { width:30px; height:30px; background:#b13a2a; color:#f6efe2; font-size:17px;
    display:flex; align-items:center; justify-content:center; border-radius:3px;
    box-shadow:0 2px 12px rgba(0,0,0,.45); font-weight:600; }
  #title .en { writing-mode:vertical-rl; font-size:10px; letter-spacing:.36em; opacity:.68; }

  /* 左下诗句 */
  #poem { position:fixed; left:36px; bottom:40px; writing-mode:vertical-rl; z-index:10;
    color:rgba(240,232,216,.6); font-size:13px; letter-spacing:.55em; line-height:2;
    opacity:0; animation:fadeUp 1.8s 2.1s forwards; }

  /* 右上时间切换 */
  #modes { position:fixed; top:40px; right:36px; display:flex; gap:26px; z-index:10;
    opacity:0; animation:fadeUp 1.8s 1.6s forwards; }
  /* 右下操作 */
  #actions { position:fixed; bottom:34px; right:36px; display:flex; align-items:center; gap:20px; z-index:10;
    opacity:0; animation:fadeUp 1.8s 1.9s forwards; }
  #modes button, #actions button {
    background:none; border:none; cursor:pointer; font-family:inherit;
    color:rgba(240,232,216,.55); font-size:14px; letter-spacing:.3em;
    padding:6px 2px; position:relative; transition:color .35s; text-shadow:0 1px 8px rgba(0,0,0,.6); }
  #modes button:hover, #actions button:hover { color:#f3ecdd; }
  #modes button.active { color:#f3ecdd; }
  #modes button.active::after { content:''; position:absolute; left:8%; right:8%; bottom:-3px;
    height:1px; background:#c8502f; }
  #actions .sep { width:1px; height:14px; background:rgba(240,232,216,.28); }
  #actions button.active { color:#f3ecdd; }

  /* 底部提示 */
  #hint { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:10;
    font-size:12px; letter-spacing:.32em; color:rgba(240,232,216,.55);
    white-space:nowrap; animation:hintLife 15s forwards; }
  @keyframes hintLife { 0%{opacity:0} 10%{opacity:1} 78%{opacity:1} 100%{opacity:0} }
  @keyframes fadeUp { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

  /* 加载遮罩 */
  #loader { position:fixed; inset:0; z-index:50; background:#0a0c10;
    display:flex; align-items:center; justify-content:center;
    transition:opacity 1.5s ease .25s, visibility 1.5s .25s; }
  #loader.hide { opacity:0; visibility:hidden; }
  .loader-inner { text-align:center; }
  .loader-title { color:#e8dfc9; font-size:30px; letter-spacing:.7em; text-indent:.7em; font-weight:600; }
  .loader-sub { color:rgba(232,223,201,.45); font-size:10px; letter-spacing:.4em; margin-top:14px; }
  .loader-bar { width:130px; height:1px; background:rgba(255,255,255,.13); margin:30px auto 0; overflow:hidden; }
  .loader-bar i { display:block; height:100%; width:45%; background:#c8502f;
    transform-origin:left; animation:loadslide 1.3s ease-in-out infinite; }
  @keyframes loadslide { 0%{transform:scaleX(0); transform-origin:left}
    50%{transform:scaleX(1); transform-origin:left}
    51%{transform-origin:right} 100%{transform:scaleX(0); transform-origin:right} }

  @media (max-width:640px){
    #poem { display:none; }
    #title { top:24px; left:20px; }
    #modes { top:26px; right:20px; gap:16px; }
    #actions { bottom:24px; right:20px; }
    #hint { font-size:10px; letter-spacing:.2em; }
 .........完整代码请登录后点击上方下载按钮下载查看