原生js+css模仿tom猫偷听麦克风你说话声音并变调复刻播放代码-html代码-BFW代码库

原生js+css模仿tom猫偷听麦克风你说话声音并变调复刻播放代码

代码语言：html

所属分类：多媒体

代码描述：原生js+css模仿tom猫偷听麦克风你说话声音并变调复刻播放代码

代码标签：原生 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: #82aef4;
    --cat-body: #FFD2A8;
    --cat-body-darker: #E09F7D;
    --cat-ear-pink: #FADADD;
    --cat-eye: #4A3F3B;
    --pink: #ff8fb1;
    --bg: #FFF9F2;
    --text-dark: #5a4f4a;
    --text-light: #fff;
    --ground: #EFE2D3;
    --shadow: rgba(180, 150, 130, 0.25);
  }
  html, body {
    margin: 0; padding: 0;
    background: radial-gradient(1200px 800px at 70% -10%, #ffffff, #FFF4E8 60%, #FFEFE0);
    color: var(--text-dark);
    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;
    box-sizing: border-box;
  }
  h1 { margin: 8px 0 0; font-weight: 800; letter-spacing: 0.5px; font-size: 24px; text-align: center; }
  .subtitle { opacity: .7; font-size: 14px; text-align: center; margin-top: 10px; }
  .stage {
    position: relative; width: min(520px, 92vw); aspect-ratio: 16/10; border-radius: 24px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.03));
    box-shadow: 0 10px 30px rgba(184, 158, 134, 0.2), inset 0 0 0 1px rgba(0,0,0,.04);
    overflow: hidden;
  }
  .ring {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(closest-side, rgba(130, 174, 244, .25), transparent 70%) center/0% 0% no-repeat,
      radial-gradient(closest-side, rgba(0, 0, 0, .04), 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%, var(--ground), transparent 70%);
  }
  .badge {
    position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 999px;
    background: rgba(255,255,255,.5); border: 1px solid rgba(0,0,0,.05);
    font-size: 12px; letter-spacing: .3px; backdrop-filter: blur(6px);
    color: var(--text-dark);
  }
  .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, .6);
    box-shadow: 0 6px 24px rgba(184, 158, 134, 0.2), inset 0 0 0 1px rgba(0,0,0,.04);
  }
  .controls label { font-size: 13px; opacity: .9; display: flex; gap: 8px; align-items: center; }
  input[type="range"] { width: 180px; accent-color: var(--accent); }
  input[type="checkbox"] { accent-color: var(--accent); }
  .btn {
    appearance: none; border: 0; padding: 10px 14px; border-radius: 12px; color: var(--text-light); font-weight: 700;
    background: linear-gradient(180deg, #a4c6ff, var(--accent)); cursor: pointer; transition: .2s;
    box-shadow: 0 10px 22px rgba(130, 174, 244, .35);
  }
  .btn:active { transform: translateY(1px); }
  .btn.stop { background: linear-gradient(180deg, #ffb3c3, #ff6f8e); box-shadow: 0 10px 22px rgba(255, 111, 142, .35);}

  /* --- The Cat (SVG) --- */
  .cat {
    /* --mouth: 0; JS will set this variable */
    position: absolute; left: 50%; bottom: 8%;
    width: 280px; height: 280px;
    transform: translateX(-50%);
    filter: drop-shadow(0 12px 20px var(--shadow));
  }

  /* SVG elements styling */
  .cat #shadow { fill: var(--shadow); opacity: 0.6; }
  .cat #tail, .cat #head-shape, .cat .ear-shape {
    fill: var(--cat-body);
    stroke: var(--cat-body-darker);
    stroke-width: 6;
.........完整代码请登录后点击上方下载按钮下载查看