svg+css实现儿童卡通交互有声动画片代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码由glm-5.3-flash ai生成，可能有错误，仅供参考：点击查看提示词
代码描述：儿童卡通交互有声动画片制作
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>帮小兔找回胡萝卜 · 儿童互动卡通</title>
<!--
  ============================================================
  帮小兔找回胡萝卜 · 单文件儿童互动卡通（3~8 岁）
  ------------------------------------------------------------
  【运行方法】双击本文件，用 Chrome / Edge 最新版打开，
  点击「▶ 一起出发」即可开始。无需联网、无外部资源。
  ------------------------------------------------------------
  【如何修改】
  · 剧情/旁白：JS 中 SCRIPT 数组（每句 ≤20 字，走 TTS）。
  · 互动点：JS 中 INT 对象（veggies / paths / flowers /
    bridge / pumpkin / burrow / basket），可增删互动步骤。
  · TTS 参数：TTS.speak() 里的 rate / pitch / volume。
  · 音效函数：SFX 对象（Web Audio 实时合成）。
  · 配色：SVG 渐变与各场景 fill，CSS 变量见 .flower --pc。
  · 画面尺寸：viewBox="0 0 1600 900"。
  ============================================================
-->
<style>
/* ===== 基础布局 ===== */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(circle at 50% 18%,#FFFDF6 0%,#FBEEDA 55%,#F1DFC2 100%);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB",sans-serif;
  overflow:hidden;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
#stage-wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#stage{width:min(97vw,calc(97vh * 16 / 9));height:min(97vh,calc(97vw * 9 / 16));
  display:block;border-radius:20px;box-shadow:0 22px 70px rgba(91,70,54,.28);
  touch-action:none;font-family:inherit}
#stage text{font-family:inherit}
#fx{pointer-events:none}

/* ===== 场景切换 ===== */
.scene{opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.scene.active{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}

/* ===== 可交互元素（大目标 + 脉冲高亮） ===== */
.can-touch{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .15s ease}
.can-touch:focus{outline:none}
.can-touch:focus-visible{filter:drop-shadow(0 0 10px #5FB4E5)}
.opt{animation:pulseGlow 1.5s ease-in-out infinite}
.ring{fill:none;stroke:#FFD93D;stroke-width:7;stroke-dasharray:14 12;pointer-events:none;
  opacity:0;transform-box:fill-box;transform-origin:center}
.opt .ring,.hint-flash .ring{opacity:1;animation:ringPulse 1.15s ease-out infinite}
.hint-flash{animation:hintFlashK 1s ease-in-out infinite}
.dim{opacity:.35}
.wrong{animation:wiggle .55s ease}
.locked{pointer-events:none}
.lift{transform:scale(1.12);filter:drop-shadow(0 14px 9px rgba(60,40,20,.3))}
.hitbox{fill:#FFFFFF;fill-opacity:0;pointer-events:visibleAll}
.popin{animation:popIn .55s cubic-bezier(.34,1.56,.64,1)}
.reveal{opacity:0;transform:translateY(30px) scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .4s ease,transform .6s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.reveal.show{opacity:1;transform:translateY(0) scale(1)}
.ph{opacity:0;transition:opacity .4s;pointer-events:none;animation:dashM 2.4s linear infinite}
.ph.show{opacity:.7}
.ph.glow{opacity:1;stroke:#FFF3B0}
.pathhit{cursor:pointer}
.slotRect{animation:slotP 1.5s ease-in-out infinite}
.ghost{opacity:0;transition:opacity .5s;pointer-events:none}
.ghost.show{opacity:.9}

/* ===== 花朵点亮 ===== */
.flower .petal{fill:#BFD8E8;transition:fill .35s ease,transform .35s ease;
  transform-box:fill-box;transform-origin:center}
.flower.lit .petal{fill:var(--pc)}
.flower.lit .head{animation:popIn .5s cubic-bezier(.34,1.56,.64,1)}
#pathFlowers .pf{opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;
  transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
#pathFlowers.show .pf{opacity:1;transform:scale(1)}
#pathFlowers.show g:nth-child(2) .pf{transition-delay:.15s}
#pathFlowers.show g:nth-child(3) .pf{transition-delay:.3s}

/* ===== 角色动画 ===== */
.char-inner{transform-box:fill-box;transform-origin:center;animation:bob 3.4s ease-in-out infinite}
.cheer{animation:cheerJump .85s ease-in-out 2}
.eye{transform-box:fill-box;transform-origin:center;animation:blinky 4.6s ease-in-out infinite}
.ear{transform-box:fill-box;transform-origin:50% 92%;animation:earTw 5.2s ease-in-out infinite}
.ear-r{animation-delay:2.4s}
.wingL{transform-box:fill-box;transform-origin:100% 50%;animation:flapW .24s ease-in-out infinite alternate}
.wingR{transform-box:fill-box;transform-origin:0% 50%;animation:flapW .24s ease-in-out infinite alternate}
.sway{transform-box:fill-box;transform-origin:50% 100%;animation:swayR 4.6s ease-in-out infinite}
.s2b{animation-delay:-2.2s}

/* ===== 环境动画 ===== */
.rays{transform-box:fill-box;transform-origin:center;animation:raysSpin 80s linear infinite}
.cloud{animation:driftX linear infinite}
.cl1{animation-duration:85s;animation-delay:-12s}
.cl2{animation-duration:115s;animation-delay:-64s}
.cl3{animation-duration:70s;animation-delay:-34s}
.smoke{transform-box:fill-box;transform-origin:center;animation:smokeUp 3.2s ease-in infinite}
.s2{animation-delay:1.05s}.s3{animation-delay:2.1s}
.wave{animation:waveX 2.8s ease-in-out infinite}
.w2{animation-delay:-.9s}.w3{animation-delay:-1.8s}
.fish{transform-box:fill-box;transform-origin:center}
.f1{animation:fishX 5.4s ease-in-out infinite}
.f2{animation:fishX 7s ease-in-out infinite;animation-delay:-2.4s}
.steam{transform-box:fill-box;transform-origin:center;animation:steamUp 2.5s ease-out infinite}
.s2c{animation-delay:.8s}.s3c{animation-delay:1.6s}
.fl{transform-box:fill-box;transform-origin:50% 100%;animation:flickK .5s ease-in-out infinite alternate}
.f2b{animation-delay:-.25s}
.twk{transform-box:fill-box;transform-origin:center;animation:twk 3s ease-in-out infinite}
.t2{animation-delay:-.7s}.t3{animation-delay:-1.4s}.t4{animation-delay:-2.1s}.t5{animation-delay:-2.6s}
.pr ellipse,.pr circle{fill:#8A5A2E}
.pr{opacity:.55}
#printsGroup.glow .pr{opacity:1;filter:drop-shadow(0 0 7px #FFD93D)}
#printsGroup.glow .pr ellipse,#printsGroup.glow .pr circle{fill:#FFB300}
.dashm{animation:dashM 1.8s linear infinite}
.quake{animation:quakeK .78s ease-in-out}
.rolled{transform:rotate(-9deg)}
.bounce{animation:bounceK .6s ease 2}

/* ===== HUD 收集栏 ===== */
#hud{pointer-events:none}
.hud-ghost{opacity:.16}
.hud-carrot{opacity:0;transition:opacity .3s}
.hud-carrot.show{opacity:1}

/* ===== 字幕条 ===== */
#subtitle{position:fixed;left:50%;bottom:3.2%;transform:translateX(-50%);max-width:min(90%,1040px);
  background:rgba(46,32,24,.8);color:#FFFFFF;padding:.5em 1.3em;border-radius:999px;
  font-size:clamp(20px,3.4vmin,34px);font-weight:700;letter-spacing:.03em;line-height:1.4;text-align:center;
  opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:30;
  text-shadow:0 2px 3px rgba(0,0,0,.5);box-shadow:0 8px 22px rgba(0,0,0,.2)}
#subtitle.show{opacity:1}
#subtitle.off{display:none}

/* ===== 控制条（大按钮） ===== */
#controls{position:fixed;top:2%;right:1.5%;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;max-width:96vw;z-index:40}
.ctl{min-width:88px;min-height:80px;border:4px solid #5B4636;border-radius:20px;background:rgba(255,255,255,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:inherit;font-size:15px;font-weight:700;color:#5B4636;cursor:pointer;
  box-shadow:0 5px 0 rgba(91,70,54,.35);transition:transform .12s ease,opacity .2s}
.ctl:active{transform:translateY(3px)}
.ctl:focus-visible{outline:3px solid #5FB4E5}
.ctl .ico{font-size:26px;line-height:1.1}
.ctl .txt{font-size:14px}
.ctl.disabled{opacity:.45;pointer-events:none}
.ctl.toggled{background:#FFE9A8}

/* ===== 顶部小元素 ===== */
#titleChip{position:fixed;top:2%;left:50%;transform:translateX(-50%);z-index:35;
  background:rgba(255,255,255,.92);border:4px solid #5B4636;border-radius:999px;padding:10px 24px;
  font-size:clamp(16px,2.4vmin,24px);font-weight:800;color:#5B4636;
  box-shadow:0 5px 0 rgba(91,70,54,.3);white-space:nowrap}
#ttsTip{position:fixed;top:calc(2% + 64px);left:50%;transform:translateX(-50%);z-index:45;display:none;
  background:#FFF3C9;border:3px solid #E8A33D;color:#8A5A16;padding:10px 18px;border-radius:16px;
  font-size:15px;font-weight:600}

/* ===== 遮罩层（开始 / 结束） ===== */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;
  background:radial-gradient(circle at 50% 40%,rgba(255,248,224,.82),rgba(120,88,58,.42));transition:opacity .5s ease}
.overlay.hidden{opacity:0;pointer-events:none}
.card{background:#FFFDF6;border:6px solid #5B4636;border-radius:34px;padding:30px 42px;text-align:center;
  box-shadow:0 18px 50px rgba(91,70,54,.35);max-width:min(88vw,560px)}
.card h1{font-size:clamp(26px,4.6vmin,42px);color:#5B4636;margin:10px 0 6px}
.card .sub{font-size:clamp(15px,2.4vmin,21px);color:#7A6350;margin-bottom:6px}
.card .tip{font-size:clamp(12px,1.9vmin,16px);color:#A38B74;margin-top:14px}
.hero{width:clamp(90px,14vmin,130px);height:auto;display:block;margin:0 auto}
.big-btn{margin-top:16px;min-width:230px;min-height:92px;border-radius:999px;border:5px solid #5B4636;
  background:#FF6B6B;color:#FFF;font-family:inherit;font-size:clamp(22px,3.4vmin,30px);font-weight:800;
  cursor:pointer;box-shadow:0 8px 0 #C94F4F;animation:pulseBtn 1.8s ease-in-out infinite;padding:0 30px}
.big-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #C94F4F}
.big-btn.green{background:#4CAF88;box-shadow:0 8px 0 #37906C}
.big-btn.green:active{box-shadow:0 3px 0 #37906C}

/* ===== 暂停时冻结所有 SVG 动画 ===== */
body.paused #stage *{animation-play-state:paused!important}

/* ===== 关键帧 ===== */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulseGlow{0%,100%{transform:scale(1);filter:drop-shadow(0 0 5px rgba(255,214,64,.65))}
  50%{transform:scale(1.055);filter:drop-shadow(0 0 16px rgba(255,214,64,.95))}}
@keyframes ringPulse{0%{transform:scale(.82);opacity:.95}100%{transform:scale(1.28);opacity:0}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}}
@keyframes hintFlashK{0%,100%{filter:drop-shadow(0 0 6px #FFD93D)}50%{filter:drop-shadow(0 0 22px #FFB300)}}
@keyframes popIn{0%{transform:scale(.2)}70%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes cheerJump{0%,100%{transform:translateY(0)}28%{transform:translateY(-50px)}55%{transform:translateY(0)}75%{transform:translateY(-24px)}}
@keyframes quakeK{10%{transform:translate(-9px,5px)}30%{transform:translate(8px,-6px)}50%{transform:translate(-6px,4px)}70%{transform:translate(5px,-3px)}90%{transform:translate(-3px,2px)}}
@keyframes driftX{from{transform:translateX(-280px)}to{transform:translateX(1880px)}}
@keyframes raysSpin{to{transform:rotate(360deg)}}
@keyframes smokeUp{0%{transform:translateY(0) scale(.7);opacity:.75}100%{transform:translateY(-110px) scale(1.3);opacity:0}}
@keyframes steamUp{0%{transform:translateY(0);opacity:.85}100%{transform:translateY(-80px);opacity:0}}
@keyframes waveX{0%,100%{transform:translateX(-16px)}50%{transform:translateX(16px)}}
@keyframes flapW{from{transform:scaleX(1)}to{transform:scaleX(.42)}}
@keyframes blinky{0%,91%,100%{transform:scaleY(1)}94%,96%{transform:scaleY(.12)}}
@keyframes earTw{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-5deg)}93%{transform:rotate(4deg)}}
@keyframes swayR{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes twk{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}
@keyframes fishX{0%,100%{transform:translateX(-26px) scaleX(1)}49%{transform:translateX(26px) scaleX(1)}
  50%{transform:translateX(26px) scaleX(-1)}99%{transform:translateX(-26px) scaleX(-1)}}
@keyframes dashM{to{stroke-dashoffset:-120}}
@keyframes slotP{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bounceK{0%,100%{transform:translateY(0)}40%{transform:translateY(-26px)}70%{transform:translateY(0)}85%{transform:translateY(-10px)}}
@keyframes flickK{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.35)}}
@keyframes pulseBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
</style>
</head>
<body>
<div id="stage-wrap">
<svg id="stage" viewBox="0 0 1600 900" role="img" aria-label="帮小兔找回胡萝卜：儿童互动卡通动画">
<defs>
  <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#AEE2FF"/><stop offset="1" stop-color="#FFF6DC"/>
 .........完整代码请登录后点击上方下载按钮下载查看