three实现三维儿童滑滑梯体验游玩代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维儿童滑滑梯体验游玩代码，爬楼梯到顶部开始。

下面为部分代码预览，完整代码请点击下载或在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 href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style>
  :root{
    --red:#ff5d5d; --yellow:#ffc93c; --green:#4cd97b; --blue:#4aa8ff;
    --purple:#b06df0; --orange:#ff9f43; --ink:#3a4a6b;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink)}
  [hidden]{display:none!important}
  #c{position:fixed;inset:0;display:block}

  /* ========== 开始界面:乐园入口招牌 ========== */
  #start{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(#6ec2ff 0%,#a5dcff 55%,#e8f8ff 100%);overflow:hidden}
  .sun-wrap{position:absolute;top:-70px;right:-70px;width:260px;height:260px}
  .rays{position:absolute;inset:-60px;border-radius:50%;
    background:repeating-conic-gradient(rgba(255,217,77,.55) 0 7deg, transparent 7deg 18deg);
    animation:spin 26s linear infinite}
  .sun-core{position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle,#fff8d6 0%,#ffd94d 55%,rgba(255,217,77,0) 74%)}
  @keyframes spin{to{transform:rotate(360deg)}}
  .cloud{position:absolute;width:150px;height:48px;background:#fff;border-radius:99px;opacity:.95;
    box-shadow:0 8px 20px rgba(80,140,200,.15)}
  .cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:50%}
  .cloud::before{width:60px;height:60px;top:-28px;left:22px}
  .cloud::after{width:44px;height:44px;top:-18px;left:72px}
  .cl1{top:12%;left:-160px;animation:drift 42s linear infinite}
  .cl2{top:30%;left:-260px;transform:scale(.7);animation:drift 58s linear 8s infinite}
  .cl3{top:6%;left:-200px;transform:scale(1.25);animation:drift 70s linear 20s infinite}
  @keyframes drift{to{transform:translateX(calc(100vw + 320px))}}
  .grass{position:absolute;bottom:0;left:-5%;right:-5%;height:120px;background:#7cc257;
    border-radius:100% 100% 0 0/90px 90px 0 0;box-shadow:inset 0 14px 0 #8ed067}
  .flower{position:absolute;bottom:26px;font-size:30px;animation:sway 3.4s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

  .gate{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;
    max-width:1060px;width:92%;align-items:center;padding-bottom:70px}
  .badge{display:inline-block;background:#fff;border:3px solid var(--yellow);border-radius:999px;
    padding:6px 18px;font-weight:800;letter-spacing:2px;font-size:14px;color:#e08a00;
    box-shadow:0 4px 0 rgba(0,0,0,.08);transform:rotate(-2deg)}
  h1{font-family:'ZCOOL KuaiLe',cursive;font-weight:400;font-size:clamp(46px,7.2vw,86px);
    line-height:1.15;margin:18px 0 10px;letter-spacing:2px}
  h1 span{display:inline-block;text-shadow:0 5px 0 rgba(30,60,120,.14);animation:lbounce 2.6s ease-in-out infinite}
  h1 span:nth-child(1){color:var(--red);animation-delay:0s;transform:rotate(-4deg)}
  h1 span:nth-child(2){color:var(--orange);animation-delay:.12s}
  h1 span:nth-child(3){color:#e6b800;animation-delay:.24s;transform:rotate(3deg)}
  h1 span:nth-child(4){color:var(--green);animation-delay:.36s}
  h1 span:nth-child(5){color:#18b7a4;animation-delay:.48s;transform:rotate(-3deg)}
  h1 span:nth-child(6){color:var(--blue);animation-delay:.6s}
  h1 span:nth-child(7){color:var(--purple);animation-delay:.72s;transform:rotate(4deg)}
  @keyframes lbounce{0%,100%{translate:0 0}50%{translate:0 -12px}}
  .tag{font-size:19px;font-weight:700;color:#4c628f;max-width:46ch}
  .tag b{color:var(--red)}
  .balloon-btn{margin-top:30px;display:inline-flex;align-items:center;gap:12px;cursor:pointer;border:none;
    font-family:'ZCOOL KuaiLe',cursive;font-size:30px;color:#fff;padding:18px 46px;border-radius:999px;
    background:linear-gradient(160deg,#ff7b6b,#ff4d5e 60%,#e63c50);
    box-shadow:0 10px 0 #c22a3e,0 22px 34px rgba(200,40,70,.35);
    transition:transform .15s, box-shadow .15s;position:relative}
  .balloon-btn:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 14px 0 #c22a3e,0 26px 40px rgba(200,40,70,.4)}
  .balloon-btn:active{transform:translateY(4px);box-shadow:0 5px 0 #c22a3e}
  .balloon-btn::after{content:'';position:absolute;left:50%;bottom:-26px;width:3px;height:26px;
    background:rgba(120,90,60,.5);translate:-50% 0}
  .meta{margin-top:44px;display:flex;gap:10px;flex-wrap:wrap}
  .meta span{background:rgba(255,255,255,.85);border-radius:999px;padding:6px 14px;font-size:14px;
    font-weight:700;color:#54719f;box-shadow:0 3px 0 rgba(0,0,0,.06)}

  .ticket{background:#fffdf6;border:3px dashed var(--orange);border-radius:22px;padding:26px 28px;
    transform:rotate(1.6deg);box-shadow:0 18px 40px rgba(60,100,160,.22);position:relative}
  .ticket::before{content:'🎫 游玩指南';font-family:'ZCOOL KuaiLe',cursive;font-size:24px;color:#e0762a;
    display:block;margin-bottom:14px}
  .ticket ul{list-style:none}
  .ticket li{display:flex;align-items:center;gap:12px;padding:8px 0;font-size:16px;font-weight:700;
    border-bottom:2px dotted #ffe1b8}
  .ticket li:last-child{border:none}
  kbd{font-family:'Baloo 2';ba.........完整代码请登录后点击上方下载按钮下载查看