代码语言：html

所属分类：其他

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

代码描述：三维三室两厅一卫一厨沙盘户型展示和第一人称漫游体验

代码标签： 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>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #0b1020;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  canvas { display: block; }

  #hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

  .panel {
    position: absolute; left: 20px; top: 20px;
    pointer-events: auto;
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 18px 18px;
    border-radius: 16px;
    background: rgba(18, 24, 36, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45);
    color: #fff;
    min-width: 216px;
  }
  .panel h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; }
  .panel .sub {
    font-size: 10px; color: #9fb0c8; letter-spacing: 3px;
    text-transform: uppercase; margin-top: -6px; margin-bottom: 4px;
  }
  button {
    pointer-events: auto; cursor: pointer; font-family: inherit;
    font-size: 13px; padding: 11px 14px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
    color: #fff; transition: all .2s ease; text-align: left;
  }
  button:hover {
    background: linear-gradient(180deg, rgba(120,190,255,0.35), rgba(80,150,220,0.18));
    border-color: rgba(140, 200, 255, 0.6);
    transform: translateY(-1px);
  }
  button:active { transform: translateY(0); }
  button.active {
    background: linear-gradient(180deg, rgba(120,190,255,0.5), rgba(60,130,210,0.28));
    border-color: rgba(150, 210, 255, 0.85);
  }

  #hint {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.88);
    font-size: 12.5px; letter-spacing: 1px;
    padding: 9px 20px; border-radius: 20px;
    background: rgba(18, 24, 36, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    white-space: nowrap;
    transition: opacity .3s;
  }

  #crosshair {
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.9);
    box.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论