svg+gsap实现国风端午节由来动画讲解全屏幻灯片代码-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：svg+gsap实现国风端午节由来动画讲解全屏幻灯片代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>端午 · 由来 —— 屈原与汨罗江 | SVG+GSAP 知识动画</title>
<meta name="description" content="用 SVG + GSAP 讲述端午节的由来：屈原、汨罗江、龙舟与粽子。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;600;900&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#0c1a1f; --ink2:#12252c; --teal:#1d4a52; --teal2:#2b6b70;
  --paper:#f3ead8; --verm:#c8402f; --verm2:#e05a3a;
  --gold:#d9a441; --gold-dim:rgba(217,164,65,.55); --leaf:#5d8f54;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Serif SC',serif;color:var(--paper);overflow-x:hidden;
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(43,107,112,.30), transparent 60%),
    radial-gradient(900px 700px at -10% 32%, rgba(200,64,47,.08), transparent 55%),
    linear-gradient(180deg,#0e2127 0%,#0b181d 45%,#081217 100%);
  background-attachment:fixed;
}
::selection{background:var(--verm);color:var(--paper)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0a1519}
::-webkit-scrollbar-thumb{background:#24454d;border:2px solid #0a1519;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--verm)}
b,strong{color:var(--gold);font-weight:600}

/* ---------- 顶部进度 & 顶栏 ---------- */
#pbar{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--verm);transform:scaleX(0);transform-origin:left center;z-index:40;box-shadow:0 0 10px rgba(200,64,47,.7)}
.topbar{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:16px 28px;background:linear-gradient(180deg,rgba(8,18,23,.88),transparent);pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-family:'Ma Shan Zheng',cursive;font-size:1.35rem;color:var(--paper);text-decoration:none;letter-spacing:.15em}
.brand svg{width:24px;height:24px}
.datepill{font-family:'ZCOOL XiaoWei',serif;font-size:.8rem;letter-spacing:.32em;color:var(--gold);border:1px solid rgba(217,164,65,.35);padding:7px 16px;background:rgba(8,18,23,.55)}

/* ---------- 左侧章节导航 ---------- */
#chNav{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:19px}
#chNav a{display:flex;align-items:center;gap:11px;text-decoration:none;color:rgba(243,234,216,.55)}
#chNav i{width:9px;height:9px;border:1.5px solid rgba(217,164,65,.6);transform:rotate(45deg);transition:.3s;flex:none}
#chNav span{font-family:'ZCOOL XiaoWei',serif;font-size:.78rem;letter-spacing:.26em;opacity:0;transform:translateX(-6px);transition:.3s;white-space:nowrap}
#chNav a:hover span,#chNav a.on span{opacity:1;transform:none}
#chNav a.on{color:var(--paper)}
#chNav a.on i{background:var(--verm);border-color:var(--verm);box-shadow:0 0 12px rgba(200,64,47,.9)}

/* ---------- 环境层 ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mist{position:absolute;width:62vw;height:36vh;border-radius:50%;filter:blur(12px)}
.m1{top:10%;left:-12%;background:radial-gradient(closest-side,rgba(243,234,216,.055),transparent 70%)}
.m2{top:46%;right:-16%;background:radial-gradient(closest-side,rgba(43,107,112,.16),transparent 70%)}
.m3{bottom:6%;left:18%;background:radial-gradient(closest-side,rgba(243,234,216,.04),transparent 70%)}
.mote{position:absolute;border-radius:50%}
#riverWrap{position:fixed;left:0;right:0;bottom:0;height:200px;z-index:1;pointer-events:none}
#riverWrap svg.waves{position:absolute;bottom:0;left:0;width:100%;height:100%}
.drift-zong{position:absolute;bottom:104px;left:-70px;width:34px}

/* ---------- 场景通用 ---------- */
main,header.hero,footer.end{position:relative;z-index:2}
.scene{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(320px,560px) 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding:15vh 8vw 17vh;max-width:1520px;margin:0 auto}
.scene.flip .stage{order:-1}
.ghost{position:absolute;font-family:'Ma Shan Zheng',cursive;font-size:clamp(13rem,32vmin,26rem);line-height:1;top:5vh;right:3vw;pointer-events:none;user-select:none;z-index:0;color:rgba(243,234,216,.028);-webkit-text-stroke:1.5px rgba(217,164,65,.13)}
.scene.flip .ghost{right:auto;left:2vw}

.copy{position:relative;z-index:2}
.kicker{font-family:'ZCOOL XiaoWei',serif;color:var(--gold);letter-spacing:.4em;font-size:.95rem;display:flex;align-items:center;gap:.75em;margin-bottom:1.15rem}
.kicker i{width:10px;height:10px;background:var(--verm);transform:rotate(45deg);flex:none}
h2{font-family:'Ma Shan Zheng',cursive;font-weight:400;font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.3}
.rule{height:2px;width:130px;background:linear-gradient(90deg,var(--verm),transparent);margin:1rem 0 1.4rem}
.lead{font-size:1.12rem;font-weight:600;line-height:2;margin-bottom:1rem}
.body-p{color:rgba(243,234,216,.78);line-height:2.1;font-size:1rem;margin-bottom:1.25rem}
.facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.25rem}
.fact{border:1px solid rgba(217,164,65,.4);padding:.45rem .85rem;font-size:.85rem;color:rgba(243,234,216,.85);border-radius:3px;background:rgba(13,32,39,.5);transition:.3s}
.fact b{font-family:'ZCOOL XiaoWei',serif;margin-right:.55em;letter-spacing:.08em}
.fact:hover{border-color:var(--verm);transform:translateY(-3px);background:rgba(200,64,47,.14)}
.quote{border-left:3px solid var(--verm);padding:.5rem 0 .5rem 1.15rem;font-family:'Ma Shan Zheng',cursive;font-size:1.4rem;line-height:1.9;color:rgba(243,234,216,.92)}
.quote small{display:block;font-family:'ZCOOL XiaoWei',serif;color:var(--gold-dim);font-size:.8rem;letter-spacing:.3em;margin-top:.35rem}
.note{border-left:2px solid var(--gold);padding:.7rem 1.1rem;background:rgba(217,164,65,.06);color:rgba(243,234,216,.82);font-size:.93rem;line-height:2}

.stage{position:relative;z-index:2;margin:0;padding:14px;border:1px solid rgba(217,164,65,.16);background:radial-gradient(120% 100% at 50% 0%,rgba(29,74,82,.35),rgba(10,22,27,.15) 72%);box-shadow:0 34px 90px -34px rgba(0,0,0,.65)}
.stage svg{display:block;width:100%;height:auto}
.corner{position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:.85;pointer-events:none}
.corner.tl{top:-2px;left:-2px;border-right:0;border-bottom:0}
.corner.tr{top:-2px;right:-2px;border-left:0;border-bottom:0}
.corner.bl{bottom:-2px;left:-2px;border-right:0;border-top:0}
.corner.br{bottom:-2px;right:-2px;border-left:0;border-top:0}
.vq{position:absolute;right:20px;top:26px;writing-mode:vertical-rl;font-family:'Ma Shan Zheng',cursive;font-size:1.45rem;letter-spacing:.32em;line-height:2.1;color:rgba(232,217,168,.85);border-right:2px solid rgba(200,64,47,.65);padding-right:13px;pointer-events:none}
.hint{margin-top:1rem;font-family:'ZCOOL XiaoWei',serif;color:var(--gold-dim);letter-spacing:.2em;font-size:.86rem;display:flex;align-items:center;gap:10px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--verm2);animation:pul 1.6s infinite;flex:none}
@keyframes pul{0%,100%{box-shadow:0 0 0 0 rgba(224,90,58,.6)}70%{box-shadow:0 0 0 11px rgba(224,90,58,0)}}
#zzCount{color:var(--verm2);font-style:normal;margin-left:8px;letter-spacing:.1em}

/* ---------- 首屏 ---------- */
.hero{min-height:100vh;padding:0}
.hero-grid{position:relative;z-index:2;min-height:100vh;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4.5vw;padding:17vh 8vw 32vh;max-width:1520px;margin:0 auto}
.hero-date{writing-mode:vertical-rl;border-right:1px solid rgba(217,164,65,.4);padding-right:1.3rem;height:330px;display:flex;gap:1.1rem;letter-spacing:.5em;color:var(--gold);font-family:'ZCOOL XiaoWei',serif;font-size:.95rem}
.hero-date b{font-family:'Ma Shan Zheng',cursive;font-size:1.55rem;color:var(--paper);letter-spacing:.3em}
.hero-kicker{margin-bottom:1.6rem}
.hero-title{position:relative;font-family:'Ma Shan Zheng',cursive;font-weight:400;font-size:clamp(6rem,17vw,12.5rem);line-height:1;display:flex;align-items:flex-start;letter-spacing:.05em}
.hero-title .t2{color:var(--verm2)}
.brush-svg{position:absolute;left:-2%;bottom:-16px;width:104%;height:40px;z-index:-1}
.brush{stroke:var(--verm);stroke-width:7;fill:none;stroke-linecap:round;opacity:.85;stroke-dasharray:620;stroke-dashoffset:0}
.seal{writing-mode:vertical-rl;font-family:'Ma Shan Zheng',cursive;font-size:1.5rem;background:var(--verm);color:#f6e8d6;padding:.75rem .45rem;letter-spacing:.28em;box-shadow:4px 5px 0 rgba(0,0,0,.35);transform:rotate(6deg);position:absolute;right:-92px;top:6px;border-radius:3px}
.hero-sub{margin-top:2.4rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:rgba(243,234,216,.86);letter-spacing:.16em;font-weight:600}
.badges{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap}
.badges span{font-family:'ZCOOL XiaoWei',serif;font-size:.82rem;letter-spacing:.22em;color:var(--gold);border:1px solid rgba(217,164,65,.4);padding:.55rem 1.05rem;background:rgba(13,32,39,.4);transition:.3s;cursor:default}
.badges span:hover{background:rgba(200,64,47,.16);border-color:var(--verm);transform:translateY(-3px)}
.hero-poem{writing-mode:vertical-rl;font-size:1.15rem;line-height:2.5;letter-spacing:.42em;color:rgba(243,234,216,.72);border-left:1px solid rgba(217,164,65,.35);padding-left:1.5rem;height:380px;font-weight:600}
#heroBoatSvg{position:absolute;bottom:116px;left:0;z-index:2}
.bird{position:absolute;z-index:2;opacity:0}
.b1{top:23%;left:0}.b2{top:31%;left:0}
.cue{positi.........完整代码请登录后点击上方下载按钮下载查看