three实现三维迪士尼乐园烟花秀代码-html代码-BFW代码库

three实现三维迪士尼乐园烟花秀代码

代码语言：html

所属分类：其他

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

  #panel {
    position: fixed; top: 18px; left: 18px; width: 252px;
    padding: 16px 18px 14px;
    border-radius: 16px;
    background: rgba(24, 18, 48, 0.42);
    backdrop-filter: blur(16px) saturate(170%);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #ece8ff;
    font-size: 13px;
    user-select: none;
    z-index: 10;
    animation: panelIn 0.9s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes panelIn {
    from { opacity: 0; transform: translateY(-14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }

  #panel h1 {
    font-size: 15px; font-weight: 600; letter-spacing: 0.5px;
    margin-bottom: 14px; color: #fff;
    text-shadow: 0 0 16px rgba(180,150,255,0.8);
  }

  #btn-launch {
    display: block; width: 100%; padding: 10px 0; margin-bottom: 16px;
    border: none; border-radius: 10px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; letter-spacing: 1px; color: #2b1650;
    background: linear-gradient(135deg, #ffd36e, #ff9ec4 55%, #a48bff);
    box-shadow: 0 6px 20px rgba(255, 150, 200, 0.35);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s;
  }
  #btn-launch:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 9px 26px rgba(255,150,200,0.5); }
  #btn-launch:active { transform: translateY(1px) scale(0.985); }

  .field { margin-bottom: 13px; }
  .field label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 7px; color: #c9c2ee; font-size: 12.5px;
  }
  .field .val { color: #ffd36e; font-variant-numeric: tabular-nums; font-weight: 600; }

  input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px; border-radius: 4px; outline: none; cursor: pointer;
    background: linear-gradient(90deg, #8b6dff, #ff9ec4);
    opacity: 0.9;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 2px solid #b39dff;
    box-shadow: 0 0 10px rgba(180, 150, 255, 0.9);
  }
  input[type="range"]::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; border: 2px solid #b39dff;
  }

  .check { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #c9c2ee; font-size: 12.5px; }
  .check input { accent-color: #b39dff; width: 14px; height: 14px; cursor: pointer; }

  .tip {
    margin-top: 14px; padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 11.5px; line-height: 1.7; color: #8f88b8;
  }
</style>
</head>
<body>

<div id="panel">
  <h1>🎆 迪士尼乐园烟花</h1>

  <button .........完整代码请登录后点击上方下载按钮下载查看