代码语言：html

所属分类：三维

代码描述：three实现三维苏州城市微缩沙盘模型代码

代码标签： three 三维 苏州 城市 微缩 沙盘 模型 代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>姑苏小院 · 把江南放在掌心 | 三维微缩沙盘</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#f6f2e8; --ink:#232a24; --ink2:#5c6357; --green:#2e4d3a; --green2:#3c6e4f;
    --line:#ddd6c2; --gold:#b98d4f; --red:#b23b2e;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden}
  body{
    font-family:"Noto Serif SC",serif;color:var(--ink);user-select:none;
    background:radial-gradient(1300px 900px at 68% 18%, #fbf9f2 0%, #f1ecdd 55%, #e6dfcc 100%);
  }
  #stage{position:fixed;inset:0;cursor:grab}
  #stage:active{cursor:grabbing}
  #stage canvas{display:block;touch-action:none}
  #vignette{position:fixed;inset:0;pointer-events:none;z-index:3;
    background:radial-gradient(120% 100% at 50% 42%, transparent 55%, rgba(90,78,48,.14) 100%);}

  /* ---------- 顶部 ---------- */
  header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;
    padding:16px 30px;gap:36px;
    background:linear-gradient(rgba(246,242,232,.92), rgba(246,242,232,0));}
  .brand{display:flex;align-items:center;gap:11px}
  .logo{width:36px;height:36px;border-radius:8px;background:var(--green);color:#f3eeda;
    display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;
    box-shadow:inset 0 0 0 1.5px rgba(233,214,160,.55), 0 3px 8px rgba(40,60,40,.25)}
  .bt b{display:block;font-size:16px;letter-spacing:5px;font-weight:700}
  .bt span{display:block;font-size:8.5px;letter-spacing:2.6px;color:#98937e;margin-top:2px}
  nav{display:flex;gap:32px;margin-left:26px;flex:1}
  nav a{font-size:13.5px;letter-spacing:3px;color:#3c443a;cursor:pointer;text-decoration:none;position:relative;padding:6px 0}
  nav a em{font-style:normal;font-size:9px;color:#9aa093;margin-left:2px}
  nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--green);transition:.3s}
  nav a:hover::after{width:100%}
  .cta{margin-left:auto;font-size:12.5px;letter-spacing:3px;color:var(--green);text-decoration:none;
    border:1px solid var(--green);padding:7px 16px;border-radius:3px;transition:.25s;cursor:pointer}
  .cta:hover{background:var(--green);color:#f3eeda}

  /* ---------- 左侧行销文案 ---------- */
  .hero{position:fixed;left:52px;top:50%;transform:translateY(-53%);z-index:9;width:420px;pointer-events:none}
  .hero>*{pointer-events:auto}
  .kick{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:4px;color:#7d8375}
  .kick .ln{width:26px;height:1px;background:#8a8674}
  .hero h1{font-size:clamp(40px,4.6vw,58px);font-weight:600;line-height:1.22;letter-spacing:2px;margin:16px 0 18px;position:relative}
  .seal{display:inline-flex;width:36px;height:36px;background:var(--red);color:#f8f3e7;font-size:21px;font-weight:700;
    align-items:center;justify-content:center;border-radius:6px;transform:rotate(7deg) translateY(-8px);margin-left:8px;
    box-shadow:0 3px 8px rgba(130,40,30,.35)}
  .lead{font-size:14px;line-height:2.1;color:var(--ink2);max-width:330px}
  .btns{display:flex;gap:12px;margin-top:24px}
  .btns button{font-family:inherit;font-size:13px;letter-spacing:3px;padding:11px 24px;border-radius:3px;cursor:pointer;transition:.25s}
  .b1{background:var(--green);color:#f3eeda;border:1px solid var(--green)}
  .b1:hover{background:#24402f}
  .b2{background:transparent;color:#4a5245;border:1px solid #b9b19c}
  .b2:hover{border-color:var(--green);color:var(--green)}
  .hr{width:300px;height:1px;background:var(--line);margin:28px 0 18px}
  .kick2{font-size:10px;letter-spacing:4px;color:#9aa08d}
  .hero h3{font-size:21px;letter-spacing:5px;font-weight:700;margin:8px 0 10px}
  .sub{font-size:12px;line-height:2;color:#7d8477;max-width:320px}
  .hero>*{opacity:0;animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
  .hero>*:nth-child(1){animation-delay:.15s}.hero>*:nth-child(2){animation-delay:.3s}
  .hero>*:nth-child(3){animation-delay:.45s}.hero>*:nth-child(4){animation-delay:.6s}
  .hero>*:nth-child(5){animation-delay:.75s}.hero>*:nth-child(6){animation-delay:.85s}
  .hero>*:nth-child(7){animation-delay:.95s}.hero>*:nth-child(8){animation-delay:1.05s}
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* ---------- 底.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论