svg+css做个有声二维卡通动画片代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由qwen-3.8-max ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：二维卡通过有声动画片生成

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>一颗种子长成大树 - 卡通短片（含旁白）</title>
<style>
  /* === 全局样式 === */
  html, body {
    margin: 0; padding: 0; height: 100%;
    background: #111; overflow: hidden;
    font-family: "PingFang SC","Microsoft YaHei",sans-serif;
    color: #fff;
  }
  #stage {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  svg.scene {
    width: min(100vw, 177.78vh);   /* 16:9 等比 */
    height: min(56.25vw, 100vh);
    display: block;
    background: #000;
    box-shadow: 0 0 40px #000;
  }
  /* === 播放按钮覆盖 === */
  #playBtn {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    cursor: pointer; z-index: 20;
    transition: opacity .4s;
  }
  #playBtn.hide { opacity: 0; pointer-events: none; }
  #playBtn .icon {
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    transition: transform .2s;
  }
  #playBtn .icon:hover { transform: scale(1.08); }
  #playBtn .icon::before {
    content: ""; display: block;
    width: 0; height: 0;
    margin-left: 14px;
    border-left: 40px solid #2a9d8f;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
  }
  #playBtn .label {
    margin-top: 20px; font-size: 22px;
    letter-spacing: 2px; font-weight: bold;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }
  #playBtn .hint {
    margin-top: 10px; font-size: 14px;
    opacity: 0.7; letter-spacing: 1px;
  }
  /* === 字幕条 === */
  #subBar {
    position: fixed; left: 50%; bottom: 6%;
    transform: translateX(-50%);
    min-width: 280px; max-width: 80%;
    padding: 12px 26px;
    background: rgba(20,20,30,0.65);
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: 18px;
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 700;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 0 6px #000, 0 2px 2px #000;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    z-index: 10;
    pointer-events: none;
  }
  #subBar.show { opacity: 1; }
  #endCard {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    pointer-events: none; opacity: 0;
    transition: opacity 1s; z-index: 9;
  }
  #endCard.show { opacity: 1; }
  #endCard .big {
    font-size: clamp(42px, 6vw, 80px);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px #f77, 0 4px 10px #000;
    letter-spacing: 8px;
  }
  #endCard .small {
    font-size: clamp(16px, 2vw, 22px);
    margin-top: 14px; opacity: .85;
    letter-spacing: 3px;
  }
  #progress {
    position: fixed; left: 0; bottom: 0;
    height: 3px; background: #2a9d8f;
    width: 0%; z-index: 15; transition: width .2s linear;
  }
  /* === TTS 开关按钮 === */
  #ttsToggle {
    position: fixed; top: 20px; right: 20px;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(42, 157, 143, 0.9);
    border: 2px solid rgba(255,255,255,0.8);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.2s, background 0.2s;
    opacity: 0;
    pointer-events: none;
  }
  #ttsToggle.show {
    opacity: 1;
    pointer-events: auto;
  }
  #ttsToggle:hover {
    transform: scale(1.1);
    background: rgba(42, 157, 143, 1);
  }
  #ttsToggle.muted {
    background: rgba(100, 100, 100, 0.7);
  }
  /* 语音指示器 */
  #ttsIndicator {
    position: fixed; top: 80px; right: 20px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.6);
    border-radius: 12px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 25;
    pointer-events: none;
  }
  #ttsIndicator.show {
    opacity: 1;
  }
</style>
</head>
<body>

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