代码语言：html

所属分类：其他

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

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

代码标签： svg css 做个 有声 二维 卡通 动画片 代码

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

<!DOCTYPE html>
<!--
  ============================================================
  《一颗种子长成大树》 · 60 秒 SVG 卡通短片
  ============================================================
  【运行方式】双击本文件即可在 Chrome / Edge 最新版中播放。
              点击画面中的「▶ 播放」按钮后，动画与音效同时开始，
              60 秒播完自动循环。
  【零依赖】  全部 HTML / CSS / JS / SVG 内联于本文件；
              无图片、无外部字体、无音频文件、无 CDN。
  【如何修改】
    · 改时长：  JS 中 const DUR = 60 （秒），字幕表 SUBS 与音效表
                EVENTS 里的时间按比例调整即可。
    · 改剧情：  JS 中 SUBS 数组（每条 [开始秒, 结束秒, 文案]）。
    · 改音效：  JS 「音效函数」区块（SFX 对象），每个函数均为
                Web Audio 实时合成，可自由调音量/音高/时值。
    · 改配色：  SVG 内各 fill / stroke，以及 JS 中 SKY 天空渐变表。
    · 改节奏：  JS 中各 update 函数里的关键帧时间（单位：秒）。
  【同步机制】 画面与字幕由 performance.now() 单一时间轴驱动（纯函数
  式渲染，天然无漂移、可循环）；音效由「前瞻调度器」按同一时间轴
  提前 2.5 秒排入 AudioContext 时钟，误差 < 一帧。
  ============================================================
-->
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>一颗种子长成大树 · 60s 卡通短片</title>
<style>
/* ===================== 基础布局（留黑边居中） ===================== */
:root{ --u:1; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:#000; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
}
#stage{
  position:relative;
  width:min(100vw,177.78vh); height:min(56.25vw,100vh);
  user-select:none; -webkit-user-select:none;
}
#stage svg{ width:100%; height:100%; display:block; }

/* ===================== 关键帧（CSS 环境微动画） ===================== */
/* 这些循环只负责“环境呼吸感”（光线旋转 / 云朵浮动 / 星星闪烁），
   剧情动画全部由 JS 统一时间轴驱动，二者互不干扰 */
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes bob { from{ transform:translateY(-4px); } to{ transform:translateY(4px); } }
@keyframes tw  { from{ opacity:.25; } to{ opacity:1; } }
#sunRays{ animation:spin 60s linear infinite; transform-box:fill-box; transform-origin:center; }
.bob     { animation:bob 7.5s  ease-in-out infinite alternate; }
.bobSlow { animation:bob 11.25s ease-in-out infinite alternate; }

/* ===================== 字幕条 ===================== */
#subWrap{
  position:absolute; left:50%; bottom:4.2%;
  transform:translateX(-50%); max-width:86%;
  pointer-events:none; z-index:20;
}
#subtitle{
  background:rgba(8,10,22,.55);
  border:2px solid rgba(255,255,255,.15);
  color:#fff; font-weight:800; text-align:center;
  padding:.5em 1.3em; border-radius:999px;
  font-size:max(14px, calc(27px * var(--u)));
  letter-spacing:.05em; line-height:1.4;
  /* 白色描边感文字：深色多向阴影描边 + 投影 */
  text-shadow:-2px 0 0 #14142a, 2px 0 0 #14142a, 0 -2px 0 #14142a,
              0 2px 0 #14142a, 0 3px 8px rgba(0,0,0,.55);
  opacity:0; transform:translateY(14px) scale(.96);
  transition:opacity .35s ease, transform .35s ease;
}
#subtitle.on{ opacity:1; transform:translateY(0) scale(1); }

/* ===================== 片尾卡片 ===================== */
#endCard{
  position:absolute; inset:0; z-index:18; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s ease;
}
#endCard.show{ opacity:1; }
#endCard .et{
  font-size:max(22px, calc(56px * var(--u))); font-weight:900; color:#FFD34D;
  letter-spacing:.12em; text-shadow:0 4px 0 #4A2E17, 0 10px 28px rgba(0,0,0,.5);
}
#endCard .ee{
  margin-top:calc(14px * var(--u));
  font-size:max(12px, calc(22px * var(--u))); color:#fff; opacity:.85;
  letter-spacing:.4em; font-weight:700;
}

/* ===================== 进度条 ===================== */
#progress{
  position:absolute; left:0; bottom:0; height:4px; width:0;
  background:#FFD34D; z-index:25; border-radius:0 2px 2px 0;
}

/* ===================== 静音按钮 ===================== */
#muteBtn{
  position:absolute; right:14px; bottom:14px; z-index:50;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.38); border:2px solid rgba(255,255,255,.32);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
#muteBtn:hover{ background:rgba(0,0,0,.6); }

/* ===================== 开场海报 / 播放按钮 ===================== */
#poster{
  position:absolute; inset:0; z-index:40; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, rgba(16,20,40,.55), rgba(4,6,14,.85));
  backdrop-filter:blur(3px);
  transition:opacity .55s ease;
}
#poster.hide{ opacity:0; pointer-events:none; }
.p-inner{ text-align:center; color:#fff; padding:0 6vw; }
.p-badge{
  display:inline-block; font-size:max(11px, calc(17px * var(--u)));
  letter-spacing:.35em; font-weight:700; color:#1d1d2e; background:#FFD34D;
  padding:.35em 1em .35em 1.35em; border-radius:999px;
  box-shadow:0 4px 0 rgba(0,0,0,.25);
}
.p-title{
  margin:calc(18px * var(--u)) 0 calc(10px * var(--u));
  font-size:max(26px, calc(58px * var(--u))); font-weight:900; color:#FFD34D;
  letter-spacing:.08em; text-shadow:0 4px 0 #4A2E17, 0 10px 28px rgba(0,0,0,.5);
}
.p-sub{ margin:0 0 calc(26px * var(--u)); font-size:max(12px, calc(19px * var(--u))); opacity:.85; }
#playBtn{
  width:calc(112px * var(--u)); height:calc(112px * var(--u));
  min-width:64px; min-height:64px; margin:0 auto;
  border-radius:50%; background:#FFD34D; border:calc(6px * var(--u)) solid #4A2E17;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 12px 32px rgba(0,0,0,.5), inset 0 -6px 0 rgba(0,0,0,.12);
  transition:transform .18s ease;
}
#playBtn:hover{ transform:scale(1.09); }
#playBtn .tri{
  width:0; height:0;
  border-left:calc(36px * var(--u)) solid #4A2E17;
  border-top:calc(23px * var(--u)) solid transparent;
  border-bottom:calc(23px * var(--u)) solid transparent;
  margin-left:calc(10px * var(--u));
}
.p-hint{ margin-top:calc(20px * var(--u)); font-size:max(11px, calc(16px * var(--u))); opacity:.7; }
</style>
</head>
<body>
<div id="stage">

<svg id="film" viewBox="0 0 960 540" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop id="skyTop" offset="0" stop-color="#151b4f"/>
      <stop id="skyBot" offset="1" stop-color="#3a2a6b"/>
    </linearGradient>
  </defs>

  <g id="camera">
    <!-- ===== 场景：天空（渐变由 JS 逐帧插值，实现昼夜与天气变化） ===== -->
    <rect x="0" y="0&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论