代码语言：html

所属分类：其他

代码由qwen-4 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, maximum-scale=1, user-scalable=no">
<title>云端泳池 · Rooftop Pool</title>
<style>
/* ============ 场景色板：日落橙 / 泳池蓝绿 / 火烈鸟粉 / 木棕 / 暖灯黄 / 雾紫灰 ============ */
:root{
  --sunset:#ff9a4d; --gold:#ffd98a; --pool:#35c4c9; --pink:#ff7fa8;
  --wood:#7a5638; --haze:#9a8fb0; --ink:#171226; --panel:#241a36;
  --panelH:42vh;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#1b1428;
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;color:#ffeeda}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#cv.drag{cursor:grabbing}

/* ---- 电影感叠层：暗角 + 颗粒 ---- */
#vig{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(22,10,32,.42) 100%)}
#grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:.05;mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter><rect width="160" height="160" filter="url(%23n)" opacity="0.6"/></svg>')}

/* ---- 标题 ---- */
#title{position:fixed;top:20px;left:24px;z-index:5;pointer-events:none}
#title h1{font-size:27px;font-weight:800;letter-spacing:2px;line-height:1.15;
  background:linear-gradient(100deg,var(--gold) 10%,var(--sunset) 55%,var(--pink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(255,150,70,.35))}
#title h1 .en{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;font-size:21px}
#title p{margin-top:6px;font-size:11px;letter-spacing:5px;color:var(--gold);opacity:.92;
  text-shadow:0 1px 6px rgba(0,0,0,.6)}
#title p b{color:var(--pool);font-weight:600}

/* ---- 声音按钮 ---- */
#soundBtn{position:fixed;top:20px;right:22px;z-index:6;display:flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:999px;border:1px solid rgba(255,217,138,.45);cursor:pointer;
  background:linear-gradient(150deg,rgba(46,30,64,.72),rgba(20,28,44,.72));backdrop-filter:blur(10px);
  color:var(--gold);font-size:12px;letter-spacing:1px;transition:.25s;box-shadow:0 4px 18px rgba(0,0,0,.35)}
#soundBtn:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:0 6px 22px rgba(255,154,77,.25)}
#soundBtn svg{width:16px;height:16px;flex:none}
#soundBtn.off{color:var(--haze);border-color:rgba(154,143,176,.4)}

/* ---- 底部提示 ---- */
#hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;pointer-events:none;
  padding:9px 20px;border-radius:999px;font-size:12px;letter-spacing:1px;color:#ffe9c9;white-space:nowrap;
  background:rgba(23,18,38,.58);border:1px solid rgba(53,196,201,.3);backdrop-filter:blur(8px);
  text-shadow:0 1px 4px rgba(0,0,0,.6)}
#hint b{color:var(--pool);font-weight:600}

/* ---- 右侧常驻控制面板 ---- */
#panel{position:fixed;top:82px;right:16px;bottom:16px;width:268px;z-index:5;display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;border:1px solid rgba(255,154,77,.3);
  background:linear-gradient(165deg,rgba(38,26,56,.88),rgba(17,25,40,.9));backdrop-filter:blur(12px);
  box-shadow:0 12px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,217,138,.12)}
.pHead{flex:none;display:flex;align-items:baseline;gap:8px;padding:13px 16px 11px;
  border-bottom:1px solid rgba(255,154,77,.22);
  background:linear-gradient(90deg,rgba(255,154,77,.14),rgba(53,196,201,.1))}
.pHead svg{width:15px;height:15px;align-self:center}
.pHead b{font-size:13px;letter-spacing:2px;color:var(--gold)}
.pHead span{font-size:9px;letter-spacing:2px;color:var(--haze)}
.pBody{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 14px 16px;touch-action:pan-y;
  scrollbar-width:thin;scrollbar-color:var(--sunset) rgba(122,86,56,.25)}
.pBody::-webkit-scrollbar{width:8px}
.pBody::-webkit-scrollbar-track{background:rgba(122,86,56,.22);border-radius:8px}
.pBody::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--sunset),var(--pool));border-radius:8px}
.pBody::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--gold),var(--pool))}
.sec{padding:9px 2px 11px;border-bottom:1px dashed rgba(154,143,176,.22)}
.sec:last-child{border-bottom:none}
.secT{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:2.5px;color:var(--haze);margin-bottom:9px}
.secT::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sc,var(--pool));
  box-shadow:0 0 8px var(--sc,var(--pool))}
.row{display:grid;grid-template-columns:62px 1fr 44px;align-items:center;gap:8px;margin:8px 0;font-size:12px}
.row>span{color:#f3ddc2;letter-spacing:.5px}
.row em{font-style:normal;font-size:10px;color:var(--pool);text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--wood),var(--sunset) 60%,var(--gold))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#aef0f2,var(--pool) 70%);border:2px solid #12303a;
  box-shadow:0 0 8px rgba(53,196,201,.7);transition:transform .15s}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--pool);
  border:2px solid #12303a;box-shadow:0 0 8px rgba(53,196,201,.7)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--wood),var(--sunset),var(--gold))}
input[type=range]:focus-visible{outline:2px solid var(--pool);outline-offset:4px}
.swRow{display:flex;align-items:center;justify-content:space-between;margin:9px 0;font-size:12px;cursor:pointer}
.swRow>span{color:#f3ddc2}
.swRow input{position:absolute;opacity:0;pointer-events:none}
.sw{flex:none;width:38px;height:21px;border-radius:999px;position:relative;transition:.25s;
  background:rgba(122,86,56,.55);border:1px solid rgba(154,143,176,.35)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:#cbb8a4;transition:.25s}
.swRow input:checked+.sw{background:linear-gradient(90deg,var(--sunset),var(--pink));border-color:var(--pink);
  box-shadow:0 0 10px rgba(255,127,168,.45)}
.swRow input:checked+.sw::after{left:19px;background:#fff6ec}
.presets{display:flex;gap:4px;padding:3px;border-radius:11px;background:rgba(122,86,56,.3);margin-bottom:4px}
.presets button{flex:1;padding:7px 0;border:none;border-radius:8px;background:transparent;cursor:pointer;
  color:#e8d4bc;font-size:12px;letter-spacing:2px;transition:.22s}
.presets button:hover{color:var(--gold)}
.presets button.on{background:linear-gradient(120deg,var(--gold),var(--sunset));color:#3a1c14;font-weight:700;
  box-shadow:0 2px 10px rgba(255,154,77,.45)}
input[type=color]{width:100%;height:26px;border:1px solid rgba(53,196,201,.5);border-radius:8px;cursor:pointer;
  background:transparent;padding:2px;grid-column:2/4}
input[type=color]:.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论