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

代码语言：html

所属分类：其他

代码由deepseek-v4.1 ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：儿童卡通交互有声动画片制作

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>帮小兔找回胡萝卜</title>
<style>
/* ==================== 基础布局 ==================== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #10243a;
  overflow: hidden;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
#app {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
}
#stage {
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

/* ==================== 字幕 ==================== */
.caption {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  width: min(90%, 940px);
  padding: 14px 26px;
  border-radius: 26px;
  background: rgba(20, 30, 54, 0.80);
  color: #ffffff;
  font-size: clamp(15px, 2.1vw, 25px);
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.45;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  box-shadow: 0 8px 26px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.15);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
  overflow-wrap: break-word;
  word-break: break-word;
  z-index: 30;
}
.caption.hidden { opacity: 0; transform: translateX(-50%) translateY(14px); }

/* ==================== 控制条 ==================== */
#controls {
  position: absolute;
  top: 14px; left: 14px;
  display: flex; flex-wrap: wrap; gap: 8px;
  z-index: 40;
}
#controls button {
  min-height: 54px;
  min-width: 90px;
  padding: 8px 16px;
  font-size: clamp(13px, 1.4vw, 17px);
  font-weight: 800;
  font-family: inherit;
  border-radius: 16px;
  border: 3px solid #2b3a55;
  background: rgba(255,255,255,0.94);
  color: #22304a;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0,0,0,0.22);
  transition: transform .12s ease, background .2s ease, box-shadow .12s ease;
  touch-action: manipulation;
}
#controls button:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,0.22); }
#controls button.off { background: rgba(176,186,202,0.92); color: #5a6478; }

/* ==================== 开始/结束遮罩 ==================== */
.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  background: radial-gradient(circle at 50% 45%, rgba(12,30,55,.50), rgba(8,18,34,.90));
  z-index: 60;
  transition: opacity .45s ease;
  padding: 24px;
  text-align: center;
}
.overlay.hidden { opacity: 0; pointer-events: none; }
.overlay h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 46px);
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.6), 0 0 0 2px rgba(255,217,61,.35);
  letter-spacing: 2px;
}
.overlay p {
  margin: 0;
  color: #ffe9a8;
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 700;
}
.big-btn {
  font-family: inherit;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 900;
  padding: 22px 54px;
  border-radius: 999px;
  border: 5px solid #ffffff;
  background: linear-gradient(180deg, #ffd54a, #ff9f1c);
  color: #5a3200;
  cursor: pointer;
  box-shadow: 0 10px 0 #c96f00, 0 18px 42px rgba(0,0,0,.45);
  transition: transform .12s ease, box-shadow .12s ease;
  touch-action: manipulation;
  letter-spacing: 2px;
}
.big-btn:active { transform: translateY(6px); box-shadow: 0 4px 0 #c96f00, 0 10px 24px rgba(0,0,0,.4); }
#start-btn { animation: startPulse 1.7s ease-in-out infinite; }
@keyframes startPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ==================== TTS 降级提示 ==================== */
#tts-warning {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  padding: 10px 20px;
  border-radius: 14px;
  background: rgba(255, 236, 179, .96);
  color: #7a5200;
  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  pointer-events: none;
  transition: opacity .4s ease;
}
#tts-warning.hidden { opacity: 0; }

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

/* ==================== 关键帧 ==================== */
@keyframes bobFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes haloPulse {
  0%, 100% { opacity: .18; }
  50%      { opacity: .62; }
}
@keyframes cloudDriftA {
  0%   { transform: translateX(0); }
  100% { transform: translateX(70px); }
}
@keyframes cloudDriftB {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-60px); }
}
@keyframes shakeIt {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-10px); }
  40%      { transform: translateX(10px); }
  60%      { transform: translateX(-7px); }
  80%      { transform: translateX(7px); }
}
@keyframes rabbitBreath {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.035); }
}

/* ==================== SVG 元素状态 ==================== */
.bob { animation: bobFloat 2.4s ease-in-out infinite; }

.cloud-wrap { animation: cloudDriftA 14s ease-in-out infinite alternate; }
.cloud-wrap.c2 { animation-name: cloudDriftB; animation-duration: 18s; }

.halo { opacity: 0; transition: opacity .3s ease; }
.interactive .halo { animation: haloPulse 1.5s ease-in-out infinite; }
.answer .halo      { animation: haloPulse .6s ease-in-out infinite; }

.scene { transition: opacity .45s ease; }
.scene.hidden { opacity: 0; pointer-events: none; }

#stage .dragging { cursor: grabbing; filter: drop-shadow(0 10px 12px rgba(0,0,0,.32)); }

.shake { animation: shakeIt .5s ease; }

/* 星星点亮 */
.star-shape { transition: fill .35s ease, stroke .35s ease; }
.lit .star-shape { fill: #FFD93D !important; stroke: #E0A800 !important; }
.lit text { fill: #7a5200 !important; }

/* 小兔 */
#rabbit { transition: transform .7s cubic-bezier(.34,1.4,.64,1); transform-box: view-box; transform-origin: 300px 450px; cursor: pointer; }
#rabbit.side { transform: translate(-130px, 120px) scale(0.65); }
#rabbit .eyes-closed { display: none; }
#rabbit.sleeping .eyes-closed { display: inline; }
#rabbit.sleeping .eyes-open { display: none; }
#rabbit .body-breath { animation: rabbitBreath 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }

/* 可交互元素鼠标指针 */
#stage [tabindex] { cursor: pointer; }

/* 彩虹 */
#rainbow { transition: opacity 1.4s ease; }
</style>
</head>
<body>
<div id="app">

  <!-- ==================.........完整代码请登录后点击上方下载按钮下载查看