svg+css实现成语故事动画解释代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现成语故事动画解释代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>悬梁刺股 · SVG+CSS 动画短片</title>
<style>
  :root{--gold:#d8b26a;--bg:#0a0b1e;}
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:radial-gradient(1200px 700px at 50% -10%,#1b1d4d,var(--bg));color:#e8e6f5;
    font-family:system-ui,'PingFang SC','Microsoft YaHei',sans-serif;min-height:100vh;
    display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px}
  h1{font-size:28px;letter-spacing:10px;color:var(--gold);font-family:'Noto Serif SC','Songti SC','SimSun',serif}
  .subhead{color:#9a97c0;font-size:13px;margin-top:6px;letter-spacing:2px}
  .toolbar{display:flex;gap:12px;align-items:center;margin:18px 0 14px;flex-wrap:wrap;justify-content:center}
  button{background:linear-gradient(180deg,#2a2d63,#1c1f4a);color:#f0ecff;border:1px solid #4a4d8f;
    padding:10px 20px;border-radius:10px;font-size:15px;cursor:pointer;letter-spacing:2px;transition:.2s}
  button:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
  button:disabled{opacity:.45;cursor:not-allowed;transform:none}
  button.primary{background:linear-gradient(180deg,#8a5a2a,#6b4220);border-color:#c99b4f;color:#ffe9b0}
  button.primary:hover{color:#fff}
  label.loop{font-size:14px;color:#b9b6dd;display:flex;gap:6px;align-items:center;cursor:pointer}
  .stage{width:min(1080px,94vw);aspect-ratio:16/9;border-radius:14px;overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px #34386e;background:#0b0c26}
  .stage svg{width:100%;height:100%;display:block}
  .progressWrap{width:min(1080px,94vw);margin-top:14px}
  .bar{height:8px;background:#1c1f4a;border-radius:6px;overflow:hidden}
  .bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#8a5a2a,var(--gold))}
  .timeRow{display:flex;justify-content:space-between;font-size:12.5px;color:#8f8cb8;margin-top:6px}
  .status{margin-top:10px;font-size:14px;color:#ffd166;min-height:22px;letter-spacing:1px;text-align:center}
  .note{margin-top:16px;max-width:860px;color:#7f7ca8;font-size:12.5px;line-height:1.9;text-align:center}
</style>
</head>
<body>

<h1>悬 梁 刺 股</h1>
<div class="subhead">SVG + CSS 逐镜动画 · 勤学成语故事短片 · 全片 66 秒</div>

<div class="toolbar">
  <button id="btnReplay">⟲ 重播</button>
  <button id="btnPause">⏸ 暂停</button>
  <label class="loop"><input type="checkbox" id="chkLoop"/>循环播放</label>
  <button id="btnExport" class="primary">⬇ 导出视频 (MP4)</button>
</div>

<div class="stage">
<!-- ======================= 动画主体（全部 SVG + CSS） ======================= -->
<svg id="movie" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="悬梁刺股动画短片">
  <style>
    text{font-family:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',serif;}
    /* ---- 时间轴时钟（供进度条/导出使用） ---- */
    .clock{animation:clock 66s linear 0s both}
    @keyframes clock{from{fill-opacity:0}to{fill-opacity:0}}
    /* ---- 场景淡入淡出 ---- */
    .scene{opacity:0}
    @keyframes sceneFade{0%{opacity:0}7%{opacity:1}92%{opacity:1}100%{opacity:0}}
    @keyframes sceneHold{0%{opacity:0}8%{opacity:1}100%{opacity:1}}
    .sTitle{animation:sceneFade 6s linear 0s both}
    .roomAback,.roomAfront{animation:sceneFade 27s linear 6s both}
    .sA1{animation:sceneFade 9s linear 6s both}
    .sA2{animation:sceneFade 9s linear 15s both}
    .sA3{animation:sceneFade 9s linear 24s both}
    .roomB,.roomBfront{animation:sceneFade 17s linear 33s both}
    .sB1{animation:sceneFade 9s linear 33s both}
    .sB2{animation:sceneFade 8s linear 42s both}
    .sC{animation:sceneFade 8s linear 50s both}
    .sEnd{animation:sceneHold 8s linear 58s both}
    .tagA{animation:sceneFade 27s linear 6s both}
    .tagB{animation:sceneFade 17s linear 33s both}
    /* ---- 环境动效 ---- */
    @keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
    .star{animation:twinkle 3s ease-in-out infinite}
    .spark{animation:twinkle 1.8s ease-in-out infinite}
    @keyframes moonPulse{from{transform:scale(1);opacity:.75}to{transform:scale(1.07);opacity:1}}
    .moonGlow{animation:moonPulse 5s ease-in-out infinite alternate;transform-origin:1165px 88px}
    @keyframes flick{from{transform:scaleY(.92) scaleX(1.06)}to{transform:scaleY(1.12) scaleX(.94)}}
    .flame{animation:flick .8s ease-in-out infinite alternate}
    @keyframes glowPulse{from{opacity:.4}to{opacity:.8}}
    .glow{animation:glowPulse 1.6s ease-in-out infinite alternate}
    @keyframes breathe{from{transform:translateY(0)}to{transform:translateY(2.5px)}}
    .breathe{animation:breathe 1.9s ease-in-out infinite alternate}
    @keyframes blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}97.5%{transform:scaleY(1)}}
    .blink{animation:blink 4.6s linear infinite}
    @keyframes sway{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
    .sway{animation:sway 2.4s ease-in-out infinite alternate}
    @keyframes zzzFloat{0%{opacity:0;transform:translate(0,0)}25%{opacity:1}100%{opacity:0;transform:translate(30px,-52px)}}
    @keyframes fadeUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
    @keyframes popIn{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
    .eyesClosed,.eyesWide,.mouthO,.mouthSmile{opacity:0}
    /* ---- 分镜1：片头 ---- */
    .t1{animation:fadeUp .8s cubic-bezier(.2,.9,.3,1.2) .25s both}
    .t2{animation:fadeUp .8s cubic-bezier(.2,.9,.3,1.2) .5s both}
    .t3{animation:fadeUp .8s cubic-bezier(.2,.9,.3,1.2) .75s both}
    .t4{animation:fadeUp .8s cubic-bezier(.2,.9,.3,1.2) 1s both}
    .tPinyin{animation:fadeUp .8s ease 1.35s both}
    .tTag{animation:fadeUp .8s ease 1.7s both}
    .tNote{animation:fadeUp .8s ease 2.1s both}
    .sealPop{animation:popIn .7s cubic-bezier(.3,1.4,.4,1) 1.3s both;transform-origin:885px 185px}
    /* ---- 分镜2：孙敬夜读（6-15s） ---- */
    .a1head{animation:a1nod 4.8s ease-in-out 7s infinite;transform-origin:640px 352px}
    @keyframes a1nod{0%,64%,100%{transform:none}74%{transform:translateY(3px) rotate(2.5deg)}84%{transform:none}}
    /* ---- 分镜3：系发于梁（15-24s） ---- */
    .a2head{animation:a2head 9s ease-in-out 15s both;transform-origin:640px 352px}
    @keyframes a2head{0%,8%{transform:none}14%{transform:translateY(7px) rotate(4deg)}20%{transform:none}
      30%,44%{transform:translateY(-3px) rotate(-3deg)}54%,100%{transform:none}}
    .a2armR{animation:a2arm 9s ease-in-out 15s both;transform-origin:684px 386px}
    @keyframes a2arm{0%,20%{transform:rotate(0)}30%,44%{transform:rotate(-112deg)}54%,100%{transform:rotate(0)}}
    .a2rope{stroke-dasharray:64;animation:a2rope 9s linear 15s both}
    @keyframes a2rope{0%,28%{stroke-dashoffset:64}42%,100%{stroke-dashoffset:0}}
    .a2knot{animation:a2knot 9s linear 15s both}
    @keyframes a2knot{0%,42%{opacity:0}48%,100%{opacity:1}}
    .a2closed{animation:a2closed 9s linear 15s both}
    @keyframes a2closed{0%,4%{opacity:0}8%,16%{opacity:1}22%,100%{opacity:0}}
    .a2open{animation:a2open 9s linear 15s both}
    @keyframes a2open{0%,4%{opacity:1}8%,16%{opacity:0}22%,100%{opacity:1}}
    .a2yawn{animation:a2yawn 9s linear 15s both}
    @keyframes a2yawn{0%,6%{opacity:0}10%,16%{opacity:1}22%,100%{opacity:0}}
    .a2neutral{animation:a2neutral 9s linear 15s both}
    @keyframes a2neutral{0%,6%{opacity:1}10%,16%{opacity:0}22%,48%{opacity:1}56%,100%{opacity:0}}
    .a2smile{animation:a2smile 9s linear 15s both}
    @keyframes a2smile{0%,48%{opacity:0}56%,100%{opacity:1}}
    .a2zzz{animation:zzzFloat 2.4s ease-out 15.3s both}
    /* ---- 分镜4：头垂绳扯（24-33s） ---- */
    .a3head{animation:a3head 9s ease-in-out 24s both;transform-origin:640px 352px}
    @ke.........完整代码请登录后点击上方下载按钮下载查看