原生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; 
    padd.........完整代码请登录后点击上方下载按钮下载查看