three实现三维机械锁钥匙开锁原理拆解动画代码-html代码-BFW代码库

three实现三维机械锁钥匙开锁原理拆解动画代码

代码语言：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">
<meta name="description" content="机械弹子锁开锁原理 3D 动画演示">
<title>机械弹子锁 · 开锁原理 3D 演示</title>
<link rel="icon" href="data:,">
<style>
  :root{
    --acc:#35d0ff; --ok:#3ddc84; --bad:#ff5f56; --gold:#e8c268;
    --panel:rgba(15,21,29,.78); --line:rgba(255,255,255,.09);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#0b1017;
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;color:#dbe4ee}
  #stage{position:fixed;inset:0;z-index:0}
  #stage canvas{display:block}
  #vig{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%,transparent 55%,rgba(4,8,13,.55) 100%)}
  #labels{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
  .lbl{position:absolute;transform:translate(-50%,-145%);white-space:nowrap;
    font-size:12px;color:#e8f0f8;background:rgba(10,15,22,.72);border:1px solid var(--line);
    border-radius:20px;padding:2px 9px 2px 6px;display:flex;align-items:center;gap:5px;
    backdrop-filter:blur(4px)}
  .lbl i{width:7px;height:7px;border-radius:50%;display:inline-block}

  #title{position:fixed;top:14px;left:16px;z-index:3;pointer-events:none}
  #title h1{font-size:19px;font-weight:700;letter-spacing:.5px;
    text-shadow:0 2px 12px rgba(53,208,255,.25)}
  #title p{font-size:12px;color:#8fa0b3;margin-top:4px}

  #banner{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:3;
    width:min(620px,92vw);background:var(--panel);border:1px solid var(--line);
    border-radius:14px;padding:10px 16px;backdrop-filter:blur(10px);text-align:center}
  #bTop{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
  #phaseName{font-size:15px;font-weight:700;color:#fff}
  #statusChip{font-size:12px;padding:2px 10px;border-radius:20px;border:1px solid var(--line)}
  #phaseDesc{font-size:12.5px;color:#a7b6c6;margin-top:5px;line-height:1.55}

  #opts{position:fixed;top:14px;right:16px;z-index:3;background:var(--panel);
    border:1px solid var(--line);border-radius:14px;padding:10px 14px;backdrop-filter:blur(10px);
    display:flex;flex-direction:column;gap:7px;font-size:13px}
  #opts label{display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
  #opts input{accent-color:var(--acc)}

  #legend{position:fixed;left:16px;bottom:118px;z-index:3;background:var(--panel);
    border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-size:12px;
    display:flex;flex-direction:column;gap:5px;backdrop-filter:blur(8px)}
  #legend span{display:flex;align-items:center;gap.........完整代码请登录后点击上方下载按钮下载查看