原生js+css模仿tom猫监听麦克风说话声音复刻代码-html代码-BFW代码库

原生js+css模仿tom猫监听麦克风说话声音复刻代码

代码语言：html

所属分类：多媒体

代码描述：原生js+css模仿tom猫监听麦克风说话声音复刻代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>汤姆猫复刻你说话 · 可爱小猫咪</title>
<style>
  :root{
    --accent:#6C8AE4;
    --cat:#2b2f3a;
    --cat2:#394053;
    --pink:#ff8fb1;
    --bg:#0f1220;
  }
  html,body{
    margin:0; padding:0; background: radial-gradient(1200px 800px at 70% -10%, #1b1f37, #0b0e19 60%, #06070d);
    color:#e8ecff; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft Yahei", Arial;
    height:100%;
  }
  .wrap{
    display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; gap:22px; padding:20px;
  }
  h1{ margin:8px 0 0; font-weight:800; letter-spacing:0.5px; font-size:24px; text-align:center;}
  .subtitle{opacity:.8; font-size:14px; text-align:center; margin-top:-6px}
  .stage{
    position:relative; width:min(520px, 92vw); aspect-ratio: 16/10; border-radius:24px; 
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06);
    overflow:hidden;
  }
  .ring{
    position:absolute; inset:0; pointer-events:none; 
    background:
      radial-gradient(closest-side, rgba(108,138,228,.25), transparent 70%) center/0% 0% no-repeat,
      radial-gradient(closest-side, rgba(255,255,255,.05), transparent 70%) center/0% 0% no-repeat;
    transition: background-size .08s linear, opacity .2s ease;
    opacity:.85;
  }
  .ground{
    position:absolute; left:0; right:0; bottom:0; height:40%;
    background: radial-gradient(120% 100% at 50% 100%, #121528, transparent 70%);
  }
  .badge{
    position:absolute; top:14px; left:14px; padding:6px 10px; border-radius:999px;
    background: rgba(108,138,228,.18); border:1px solid rgba(255,255,255,.15);
    font-size:12px; letter-spacing:.3px; backdrop-filter: blur(6px);
  }
  .controls{
    display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center; 
    padding:10px 14px; border-radius:14px; background: rgba(255,255,255,.05);
    box-shadow: 0 6px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  }
  .controls label{ font-size:13px; opacity:.9; display:flex; gap:8px; align-items:center;}
  input[type="range"]{ width:180px; }
  .btn{
    appearance:none; border:0; padding:10px 14px; border-radius:12px; color:#0d1020; font-weight:700; 
    background: linear-gradient(180deg, #b9c7ff, #7f97ff); cursor:pointer; transition:.2s;
    box-shadow: 0 10px 22px rgba(108,138,228,.35);
  }
  .btn:active{ transform: translateY(1px); }
  .btn.stop{ background: linear-gradient(180deg, #ffb3c3, #ff6f8e); }

  /* --- The Cat --- */
  .cat{
    --mouth: 0; /* 0~1 mouth openness from JS */
    position:absolute; left:50%; bottom:10%; transform: translateX(-50%);
    width: 260px; height: 260px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.5));
  }
  .cat .shadow{
    position:absolute; inset:auto 20% 0 20%; height:18px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent);
    transform: translateY(8px);
    opacity:.5;
  }
  .head{
    position:absolute; left:50%; top:28%; transform: translate(-50%,-50%);
    width: 200px; height: 180px; border-radius: 48% 52% 46% 54%/ 52% 52% 48% 48%;
    background: radial-gradient(120% 120% at 50% 20%, #3c4257, #232735);
    border: 3px solid #222634;
  }
  .ear{ position:absolute; width: 74.........完整代码请登录后点击上方下载按钮下载查看