分享图
动画工坊
引擎就绪
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>局部高浓盐体系 · 锂离子快车道传输原理</title>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;800;900&family=Noto+Sans+SC:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
  --bg: #050a14;
  --fg: #e2e8f0;
  --muted: #5a6a82;
  --accent: #00f5d4;
  --accent2: #ffd166;
  --anode-clr: #1a3a2a;
  --cathode-clr: #3a1520;
  --sei-clr: #8b6fc0;
  --card: rgba(10, 18, 36, 0.88);
  --border: rgba(0, 245, 212, 0.12);
  --glow-cyan: rgba(0, 245, 212, 0.6);
  --glow-amber: rgba(255, 209, 102, 0.4);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg);color:var(--fg);
  font-family:'Noto Sans SC','Exo 2',sans-serif;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 15% 45%,rgba(0,245,212,0.04) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 55%,rgba(255,209,102,0.035) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 10%,rgba(139,111,192,0.04) 0%,transparent 45%);
}
/* 噪点纹理 */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page-title{
  position:relative;z-index:1;
  font-family:'Exo 2',sans-serif;font-size:clamp(1.1rem,2.5vw,1.7rem);
  font-weight:900;letter-spacing:0.14em;text-transform:uppercase;
  margin-top:1.8rem;margin-bottom:0.3rem;
  background:linear-gradient(135deg,var(--accent),#7afce2 40%,var(--accent2) 90%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.page-subtitle{
  position:relative;z-index:1;
  font-size:clamp(0.7rem,1.2vw,0.88rem);color:var(--muted);
  font-weight:300;letter-spacing:0.35em;margin-bottom:1.2rem;
}
.svg-wrap{
  position:relative;z-index:1;width:96vw;max-width:1280px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:0.8rem;backdrop-filter:blur(8px);
  box-shadow:0 0 60px rgba(0,245,212,0.04),0 0 120px rgba(139,111,192,0.03);
}
.svg-wrap svg{width:100%;height:auto;display:block;border-radius:10px;}

/* 控制面板 */
.ctrl-row{
  position:relative;z-index:1;width:96vw;max-width:1280px;
  display:flex;gap:1rem;margin-top:1.2rem;margin-bottom:0.6rem;
  flex-wrap:wrap;justify-content:center;
}
.ctrl-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:1rem 1.4rem;backdrop-filter:blur(8px);flex:1;min-width:240px;max-width:380px;
}
.ctrl-label{
  font-family:'Exo 2',sans-serif;font-size:0.65rem;letter-spacing:0.18em;
  color:var(--accent);text-transform:uppercase;margin-bottom:0.4rem;
}
.ctrl-val{
  font-family:'Exo 2',sans-serif;font-size:1.7rem;font-weight:800;color:var(--fg);
  margin-bottom:0.5rem;line-height:1;
}
.ctrl-val .u{font-size:0.72rem;font-weight:400;color:var(--muted);margin-left:0.2rem;}
input[type=range]{
  -webkit-appearance:none;width:100%;height:3px;border-radius:2px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;
  background:var(--accent);box-shadow:0 0 10px var(--glow-cyan);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);box-shadow:0 0 10px var(--glow-cyan);
}

/* 信息行 */
.info-row{
  position:relative;z-index:1;width:96vw;max-width:1280px;
  display:flex;gap:0.6rem;margin-bottom:1.8rem;flex-wrap:wrap;justify-content:center;
}
.info-chip{
  background:var(--card);border:1px solid var(--border);border-radius:6px;
  padding:0.45rem 1rem;font-size:0.72rem;color:var(--muted);backdrop-filter:blur(6px);
}
.info-chip b{color:var(--accent);font-weight:700;}
.info-chip .a2{color:var(--accent2);font-weight:700;}

/* 图例 */
.legend{
  position:relative;z-index:1;width:96vw;max-width:1280px;
  display:flex;gap:1.4rem;margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center;
  font-size:0.72rem;color:var(--muted);
}
.legend-item{display:flex;align-items:center;gap:0.4rem;}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

@keyframes cluster-pulse{0%,100%{opacity:0.55;}50%{opacity:0.85;}}
@keyframes sei-shimmer{0%{opacity:0.4;}50%{opacity:0.7;}100%{opacity:0.4;}}
@keyframes solvent-drift{0%{transform:translateY(0);}50%{transform:translateY(-4px);}100%{transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}
</style>
</head>
<body>

<div class="page-title">Local High-Concentration Electrolyte</div>
<p class="page-subtitle">局部高浓盐体系 · 锂离子快车道传输原理</p>

<div class="svg-wrap">
<svg id="mainSvg" viewBox="0 0 1200 580" xmlns="http://www.w3.org/2000/svg">
<defs>
  <!-- Li⁺ 发光滤镜 -->
  <filter id="glowCyan" x="-80%" y="-80%" width="260%" height="260%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="b1"/>
    <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="b2"/>
    <feMerge><feMergeNode in="b2"/><feMergeNode in="b1"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <!-- 离子尾迹发光 -->
  <filter id="trailGlow" x="-60%" y="-60%" width="220%" height="220%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b"/>
    <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <!-- CIP/AGG 簇发光 -->
  <filter id="glowAmber" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="b"/>
    <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <!-- SEI/CEI 发光 -->
  <filter id="seiGlow" x="-30%" y="-30%" width="160%" height="160%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="b"/>
    <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
  </filter>
  <!-- 电极纹理 -->
  <pattern id="anodePat" width="12" height="12" patternUnits="userSpaceOnUse">
    <rect width="12" height="12" fill="#14291e"/>
    <circle cx="3" cy="3" r="1.2" fill="#1e3f2c" opacity="0.7"/>
    <circle cx="9" cy="9" r="1.2" fill="#1e3f2c" opacity="0.7"/>
  </pattern>
  <pattern id="cathodePat" width="10" height="10" patternUnits="userSpaceOnUse">
    <rect width="10" height="10" fill="#2a0e16"/>
    <rect x="1" y="1" width="3.5" height="3.5" rx="0.5" fill="#3d1825" opacity="0.6"/>
    <rect x="5.5" y="5.5" width="3.5" height="3.5" rx="0.5" fill="#3d1825" opacity="0.6"/>
  </pattern>
  <!-- 快车道渐变 -->
  <linearGradient id="laneGrad" x1="0" y1="0" x2="1" y2="0">
    <stop offset="0%" stop-color="rgba(0,245,212,0)"/>
    <stop offset="15%" stop-color="rgba(0,245,212,0.06)"/>
    <stop offset="85%" stop-color="rgba(0,245,212,0.06)"/>
    <stop offset="100%" stop-color="rgba(0,245,212,0)"/>
  </linearGradient>
  <!-- 电解质背景渐变 -->
  <linearGradient id="elecBg" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#080e1e"/>
    <stop offset="50%" stop-color="#0a1225"/>
    <stop offset="100%" stop-color="#080e1e"/>
  </linearGradient>
</defs>

<!-- ===== 背景 ===== -->
<rect width="1200" height="580" fill="#050a14"/>

<!-- ===== 负极 (Anode - 硅碳) ===== -->
<rect x="20" y="55" width="100" height="470" rx="4" fill="url(#anodePat)" stroke="#1e4a32" stroke-width="1"/>
<rect x="20" y="55" width="100" height="470" rx="4" fill="rgba(26,58,42,0.3)"/>
<!-- 负极标记 -->
<text x="70" y="290" fill="#3aaa6e" font-family="'Exo 2',sans-serif" font-size="11" font-weight="700" text-anchor="middle" letter-spacing="0.1em">Si-C</text>
<text x="70" y="308" fill="#3aaa6e" font-family="'Exo 2',sans-serif" font-size="9" font-weight="400" text-anchor="middle" opacity="0.7">负极</text>

<!-- ===== SEI 层 ===== -->
<g id="seiLayer">
  <rect x="120" y="55" width="32" height="470" rx="2" fill="#1a1030" opacity="0.8"/>
  <!-- LiF 晶格纹理 -->
  <g filter="url(#seiGlow)" style="animation:sei-shimmer 3s ease-in-out infinite;">
    <line x1="125" y1="70" x2="148" y2="70" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="90" x2="148" y2="90" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="110" x2="148" y2="110" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="130" x2="148" y2="130" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="150" x2="148" y2="150" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="170" x2="148" y2="170" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="190" x2="148" y2="190" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="210" x2="148" y2="210" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="230" x2="148" y2="230" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="250" x2="148" y2="250" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="270" x2="148" y2="270" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="290" x2="148" y2="290" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="310" x2="148" y2="310" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="330" x2="148" y2="330" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="350" x2="148" y2="350" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="370" x2="148" y2="370" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="390" x2="148" y2="390" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="410" x2="148" y2="410" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="430" x2="148" y2="430" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="450" x2="148" y2="450" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="470" x2="148" y2="470" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="490" x2="148" y2="490" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="125" y1="510" x2="148" y2="510" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <!-- LiF 晶格点 -->
    <circle cx="136" cy="80" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="120" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="160" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="200" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="240" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="280" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="320" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="360" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="400" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="440" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="136" cy="480" r="2" fill="#c4b5fd" opacity="0.6"/>
  </g>
  <text x="136" y="48" fill="#a78bfa" font-family="'Exo 2',sans-serif" font-size="8" font-weight="600" text-anchor="middle" letter-spacing="0.12em">SEI (LiF)</text>
</g>

<!-- ===== 电解质主体 ===== -->
<rect x="152" y="55" width="896" height="470" fill="url(#elecBg)"/>

<!-- 快车道 (3条) -->
<rect x="152" y="145" width="896" height="28" rx="14" fill="url(#laneGrad)" opacity="0.8"/>
<rect x="152" y="270" width="896" height="28" rx="14" fill="url(#laneGrad)" opacity="0.8"/>
<rect x="152" y="395" width="896" height="28" rx="14" fill="url(#laneGrad)" opacity="0.8"/>
<!-- 车道虚线 -->
<line x1="170" y1="159" x2="1030" y2="159" stroke="rgba(0,245,212,0.08)" stroke-width="1" stroke-dasharray="8 12"/>
<line x1="170" y1="284" x2="1030" y2="284" stroke="rgba(0,245,212,0.08)" stroke-width="1" stroke-dasharray="8 12"/>
<line x1="170" y1="409" x2="1030" y2="409" stroke="rgba(0,245,212,0.08)" stroke-width="1" stroke-dasharray="8 12"/>

<!-- ===== CIP 簇 (接触离子对) ===== -->
<g class="cip-cluster" filter="url(#glowAmber)" style="animation:cluster-pulse 4s ease-in-out infinite;">
  <!-- CIP 1 -->
  <circle cx="260" cy="105" r="9" fill="#ffd166" opacity="0.7"/>
  <circle cx="278" cy="105" r="6" fill="#00f5d4" opacity="0.8"/>
  <line x1="269" y1="105" x2="272" y2="105" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
  <!-- CIP 2 -->
  <circle cx="480" cy="220" r="9" fill="#ffd166" opacity="0.65"/>
  <circle cx="498" cy="220" r="6" fill="#00f5d4" opacity="0.75"/>
  <line x1="489" y1="220" x2="492" y2="220" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
  <!-- CIP 3 -->
  <circle cx="700" cy="340" r="9" fill="#ffd166" opacity="0.7"/>
  <circle cx="718" cy="340" r="6" fill="#00f5d4" opacity="0.8"/>
  <line x1="709" y1="340" x2="712" y2="340" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
  <!-- CIP 4 -->
  <circle cx="370" cy="460" r="9" fill="#ffd166" opacity="0.65"/>
  <circle cx="388" cy="460" r="6" fill="#00f5d4" opacity="0.75"/>
  <line x1="379" y1="460" x2="382" y2="460" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
  <!-- CIP 5 -->
  <circle cx="850" cy="120" r="9" fill="#ffd166" opacity="0.7"/>
  <circle cx="868" cy="120" r="6" fill="#00f5d4" opacity="0.8"/>
  <line x1="859" y1="120" x2="862" y2="120" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
  <!-- CIP 6 -->
  <circle cx="580" cy="490" r="9" fill="#ffd166" opacity="0.65"/>
  <circle cx="598" cy="490" r="6" fill="#00f5d4" opacity="0.75"/>
  <line x1="589" y1="490" x2="592" y2="490" stroke="rgba(255,255,255,0.3)" stroke-width="1"/>
</g>

<!-- ===== AGG 簇 (聚集体) ===== -->
<g class="agg-cluster" filter="url(#glowAmber)" style="animation:cluster-pulse 5s ease-in-out 1s infinite;">
  <!-- AGG 1 -->
  <circle cx="350" cy="190" r="10" fill="#ffd166" opacity="0.6"/>
  <circle cx="370" cy="185" r="6.5" fill="#00f5d4" opacity="0.7"/>
  <circle cx="385" cy="195" r="10" fill="#ffd166" opacity="0.6"/>
  <circle cx="365" cy="200" r="6.5" fill="#00f5d4" opacity="0.7"/>
  <line x1="360" y1="190" x2="364" y2="187" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <line x1="376" y1="187" x2="380" y2="193" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <line x1="361" y1="198" x2="363" y2="196" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <!-- AGG 2 -->
  <circle cx="620" cy="110" r="10" fill="#ffd166" opacity="0.55"/>
  <circle cx="640" cy="105" r="6.5" fill="#00f5d4" opacity="0.65"/>
  <circle cx="655" cy="115" r="10" fill="#ffd166" opacity="0.55"/>
  <circle cx="635" cy="120" r="6.5" fill="#00f5d4" opacity="0.65"/>
  <line x1="630" y1="110" x2="634" y2="107" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <line x1="646" y1="107" x2="650" y2="113" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <line x1="631" y1="118" x2="633" y2="116" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <!-- AGG 3 -->
  <circle cx="780" cy="450" r="10" fill="#ffd166" opacity="0.6"/>
  <circle cx="800" cy="445" r="6.5" fill="#00f5d4" opacity="0.7"/>
  <circle cx="815" cy="455" r="10" fill="#ffd166" opacity="0.6"/>
  <circle cx="795" cy="460" r="6.5" fill="#00f5d4" opacity="0.7"/>
  <line x1="790" y1="450" x2="794" y2="447" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <line x1="806" y1="447" x2="810" y2="453" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <!-- AGG 4 -->
  <circle cx="460" cy="350" r="10" fill="#ffd166" opacity="0.55"/>
  <circle cx="480" cy="345" r="6.5" fill="#00f5d4" opacity="0.65"/>
  <circle cx="495" cy="355" r="10" fill="#ffd166" opacity="0.55"/>
  <circle cx="475" cy="360" r="6.5" fill="#00f5d4" opacity="0.65"/>
  <circle cx="500" cy="340" r="6.5" fill="#00f5d4" opacity="0.6"/>
  <line x1="470" y1="350" x2="474" y2="347" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
  <line x1="486" y1="347" x2="490" y2="353" stroke="rgba(255,255,255,0.25)" stroke-width="0.8"/>
</g>

<!-- ===== 稀少溶剂分子 ===== -->
<g style="animation:solvent-drift 6s ease-in-out infinite;">
  <ellipse cx="220" cy="200" rx="7" ry="5" fill="#4a7cb5" opacity="0.2" stroke="#5a8cc5" stroke-width="0.5" stroke-opacity="0.15"/>
  <ellipse cx="550" cy="160" rx="7" ry="5" fill="#4a7cb5" opacity="0.18" stroke="#5a8cc5" stroke-width="0.5" stroke-opacity="0.12"/>
  <ellipse cx="900" cy="300" rx="7" ry="5" fill="#4a7cb5" opacity="0.2" stroke="#5a8cc5" stroke-width="0.5" stroke-opacity="0.15"/>
  <ellipse cx="320" cy="420" rx="7" ry="5" fill="#4a7cb5" opacity="0.15" stroke="#5a8cc5" stroke-width="0.5" stroke-opacity="0.1"/>
  <ellipse cx="750" cy="230" rx="7" ry="5" fill="#4a7cb5" opacity="0.18" stroke="#5a8cc5" stroke-width="0.5" stroke-opacity="0.12"/>
</g>

<!-- ===== CEI 层 ===== -->
<g id="ceiLayer">
  <rect x="1048" y="55" width="32" height="470" rx="2" fill="#1a1030" opacity="0.8"/>
  <g filter="url(#seiGlow)" style="animation:sei-shimmer 3.5s ease-in-out 0.5s infinite;">
    <line x1="1053" y1="70" x2="1076" y2="70" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="90" x2="1076" y2="90" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="110" x2="1076" y2="110" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="130" x2="1076" y2="130" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="150" x2="1076" y2="150" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="170" x2="1076" y2="170" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="190" x2="1076" y2="190" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="210" x2="1076" y2="210" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="230" x2="1076" y2="230" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="250" x2="1076" y2="250" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="270" x2="1076" y2="270" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="290" x2="1076" y2="290" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="310" x2="1076" y2="310" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="330" x2="1076" y2="330" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="350" x2="1076" y2="350" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="370" x2="1076" y2="370" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="390" x2="1076" y2="390" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="410" x2="1076" y2="410" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="430" x2="1076" y2="430" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="450" x2="1076" y2="450" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="470" x2="1076" y2="470" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="490" x2="1076" y2="490" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <line x1="1053" y1="510" x2="1076" y2="510" stroke="#a78bfa" stroke-width="0.5" opacity="0.5"/>
    <circle cx="1064" cy="80" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="120" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="160" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="200" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="240" r="2" fill="#c4bb5" opacity="0.6"/>
    <circle cx="1064" cy="280" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="320" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="360" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="400" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="440" r="2" fill="#c4b5fd" opacity="0.6"/>
    <circle cx="1064" cy="480" r="2" fill="#c4b5fd" opacity="0.6"/>
  </g>
  <text x="1064" y="48" fill="#a78bfa" font-family="'Exo 2',sans-serif" font-size="8" font-weight="600" text-anchor="middle" letter-spacing="0.12em">CEI (LiF)</text>
</g>

<!-- ===== 正极 (Cathode - 高镍) ===== -->
<rect x="1080" y="55" width="100" height="470" rx="4" fill="url(#cathodePat)" stroke="#4a1828" stroke-width="1"/>
<rect x="1080" y="55" width="100" height="470" rx="4" fill="rgba(58,21,32,0.3)"/>
<text x="1130" y="290" fill="#d4556a" font-family="'Exo 2',sans-serif" font-size="11" font-weight="700" text-anchor="middle" letter-spacing="0.1em">NCM</text>
<text x="1130" y="308" fill="#d4556a" font-family="'Exo 2',sans-serif" font-size="9" font-weight="400" text-anchor="middle" opacity="0.7">正极</text>

<!-- ===== 方向箭头标注 ===== -->
<g opacity="0.6">
  <text x="600" y="40" fill="var(--accent)" font-family="'Exo 2',sans-serif" font-size="10" font-weight="600" text-anchor="middle" letter-spacing="0.2em">Li⁺ 快车道传输方向 →</text>
</g>

<!-- ===== 标注文字 ===== -->
<text x="600" y="555" fill="#5a6a82" font-family="'Noto Sans SC',sans-serif" font-size="9" text-anchor="middle" letter-spacing="0.05em">电解质区域：弱溶剂(DME/HFE) + 高浓LiFSI → CIP/AGG主导 → 近裸Li⁺高速传输</text>

<!-- Li⁺ 离子动态层 (由JS创建) -->
<g id="ionLayer"></g>
<!-- 离子尾迹层 -->
<g id="trailLayer"></g>

<!-- 迁移数仪表 -->
<g id="gaugeGroup" transform="translate(600,530)">
  <text x="0" y="0" fill="#5a6a82" font-family="'Exo 2',sans-serif" font-size="8" text-anchor="middle" letter-spacing="0.1em">Li⁺ MIGRATION NUMBER</text>
  <text id="gaugeVal" x="0" y="18" fill="var(--accent)" font-family="'Exo 2',sans-serif" font-size="16" font-weight="800" text-anchor="middle">0.65</text>
</g>

</svg>
</div>

<!-- 控制面板 -->
<div class="ctrl-row">
  <div class="ctrl-card">
    <div class="ctrl-label">LiFSI 浓度</div>
    <div class="ctrl-val"><span id="concVal">4.0</span><span class="u">M</span></div>
    <input type="range" id="concSlider" min="1" max="5" step="0.1" value="4.0">
  </div>
  <div class="ctrl-card">
    <div class="ctrl-label">Li⁺ 迁移数 t₊</div>
    <div class="ctrl-val"><span id="migVal">0.65</span></div>
    <input type="range" id="migSlider" min="0.2" max="0.8" step="0.01" value="0.65">
  </div>
  <div class="ctrl-card">
    <div class="ctrl-label">放电倍率</div>
    <div class="ctrl-val"><span id="rateVal">10</span><span class="u">C</span></div>
    <input type="range" id="rateSlider" min="1" max="20" step="0.5" value="10">
  </div>
</div>

<!-- 图例 -->
<div class="legend">
  <div class="legend-item"><div class="legend-dot" style="background:#00f5d4;box-shadow:0 0 6px rgba(0,245,212,0.6);"></div>Li⁺ 近裸离子</div>
  <div class="legend-item"><div class="legend-dot" style="background:#ffd166;box-shadow:0 0 6px rgba(255,209,102,0.4);"></div>FSI⁻ 阴离子</div>
  <div class="legend-item"><div class="legend-dot" style="background:#4a7cb5;opacity:0.4;"></div>弱溶剂 (稀少)</div>
  <div class="legend-item"><div class="legend-dot" style="background:#a78bfa;box-shadow:0 0 6px rgba(167,139,250,0.4);"></div>LiF 界面层</div>
  <div class="legend-item"><div class="legend-dot" style="background:rgba(0,245,212,0.15);border:1px solid rgba(0,245,212,0.3);"></div>快车道</div>
</div>

<!-- 信息条 -->
<div class="info-row">
  <div class="info-chip">核心矛盾：10C放电需极高Li⁺传导速率 vs 传统电解液 <b>t₊ &lt; 0.4</b></div>
  <div class="info-chip">IFR解法：<b>弱溶剂+强锂盐</b> → CIP/AGG主导 → 近裸Li⁺传输</div>
  <div class="info-chip">关键参数：<span class="a2">LiFSI 4.0M</span> · 弱溶剂/稀释剂 <b>1:2</b></div>
  <div class="info-chip">界面优势：富<span class="a2">LiF</span>的SEI/CEI → 高离子电导 + 电子绝缘</div>
</div>

<script>
(function(){
  'use strict';
  const SVG_NS = 'http://www.w3.org/2000/svg';
  const svg = document.getElementById('mainSvg');
  const ionLayer = document.getElementById('ionLayer');
  const trailLayer = document.getElementById('trailLayer');

  /* ===== 参数 ===== */
  let concentration = 4.0;   // M
  let migrationNum = 0.65;
  let dischargeRate = 10;    // C

  /* ===== 离子对象池 ===== */
  const ions = [];
  const MAX_IONS = 24;

  /* ===== 快车道 Y 坐标 ===== */
  const LANES = [
    { y: 159, wobble: 8 },
    { y: 284, wobble: 10 },
    { y: 409, wobble: 7 }
  ];

  /* ===== 区域边界 ===== */
  const X_START = 155;   // SEI右边缘
  const X_END   = 1045;  // CEI左边缘

  /* ===== 工具函数 ===== */
  function rand(a, b) { return a + Math.random() * (b - a); }
  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }

  /* ===== 创建Li⁺离子SVG元素 ===== */
  function createIonElement() {
    const g = document.createElementNS(SVG_NS, 'g');
    // 外层辉光
    const glow = document.createElementNS(SVG_NS, 'circle');
    glow.setAttribute('r', '8');
    glow.setAttribute('fill', 'rgba(0,245,212,0.18)');
    g.appendChild(glow);
    // 中层
    const mid = document.createElementNS(SVG_NS, 'circle');
    mid.setAttribute('r', '5');
    mid.setAttribute('fill', 'rgba(0,245,212,0.45)');
    g.appendChild(mid);
    // 核心亮点
    const core = document.createElementNS(SVG_NS, 'circle');
    core.setAttribute('r', '2.8');
    core.setAttribute('fill', '#b0fff0');
    g.appendChild(core);
    // "Li⁺" 标签 (小字)
    const label = document.createElementNS(SVG_NS, 'text');
    label.setAttribute('x', '0');
    label.setAttribute('y', '-10');
    label.setAttribute('fill', 'rgba(0,245,212,0.55)');
    label.setAttribute('font-size', '6');
    label.setAttribute('font-family', "'Exo 2',sans-serif");
    label.setAttribute('text-anchor', 'middle');
    label.setAttribute('font-weight', '700');
    label.textContent = 'Li⁺';
    g.appendChild(label);
    ionLayer.appendChild(g);
    return g;
  }

  /* ===== 创建尾迹元素 ===== */
  function createTrailElement() {
    const c = document.createElementNS(SVG_NS, 'circle');
    c.setAttribute('r', '3');
    c.setAttribute('fill', 'rgba(0,245,212,0.12)');
    trailLayer.appendChild(c);
    return c;
  }

  /* ===== 生成离子 ===== */
  function spawnIon() {
    if (ions.length >= MAX_IONS) return;
    const lane = LANES[Math.floor(Math.random() * LANES.length)];
    const speed = (1.2 + migrationNum * 2.5) * (dischargeRate / 10);
    const ion = {
      x: X_START - rand(5, 30),
      y: lane.y + rand(-lane.wobble, lane.wobble),
      baseY: lane.y,
      wobbleAmp: lane.wobble,
      vx: speed + rand(-0.3, 0.3),
      phase: rand(0, Math.PI * 2),
      el: createIonElement(),
      trails: [],
      trailTimer: 0,
      alive: true
    };
    ion.el.setAttribute('opacity', '0');
    ions.push(ion);
  }

  /* ===== 更新离子 ===== */
  function updateIons(dt) {
    const dtFactor = dt / 16; // 标准化到60fps
    for (let i = ions.length - 1; i >= 0; i--) {
      const ion = ions[i];
      // 淡入
      const curOp = parseFloat(ion.el.getAttribute('opacity')) || 0;
      if (curOp < 1) {
        ion.el.setAttribute('opacity', String(Math.min(1, curOp + 0.05 * dtFactor)));
      }
      // 移动
      ion.x += ion.vx * dtFactor;
      ion.phase += 0.03 * dtFactor;
      ion.y = ion.baseY + Math.sin(ion.phase) * ion.wobbleAmp;

      // 更新位置
      ion.el.setAttribute('transform', `translate(${ion.x},${ion.y})`);

      // 尾迹
      ion.trailTimer += dtFactor;
      if (ion.trailTimer > 2.5) {
        ion.trailTimer = 0;
        if (ion.trails.length < 8) {
          const tEl = createTrailElement();
          tEl.setAttribute('cx', String(ion.x));
          tEl.setAttribute('cy', String(ion.y));
          ion.trails.push({ el: tEl, x: ion.x, y: ion.y, life: 1.0 });
        }
      }

      // 更新尾迹衰减
      for (let j = ion.trails.length - 1; j >= 0; j--) {
        const t = ion.trails[j];
        t.life -= 0.025 * dtFactor;
        if (t.life <= 0) {
          trailLayer.removeChild(t.el);
          ion.trails.splice(j, 1);
        } else {
          t.el.setAttribute('opacity', String(t.life * 0.3));
          t.el.setAttribute('r', String(2 + (1 - t.life) * 2));
        }
      }

      // 越界移除
      if (ion.x > X_END + 30) {
        ion.alive = false;
        ionLayer.removeChild(ion.el);
        for (const t of ion.trails) {
          trailLayer.removeChild(t.el);
        }
        ions.splice(i, 1);
      }
    }
  }

  /* ===== 迁移数计算（基于浓度的简化模型）===== */
  function calcMigration(c) {
    // 简化Sigmoid: 1.0M→0.33, 2.0M→0.42, 3.0M→0.53, 4.0M→0.65, 5.0M→0.73
    return clamp(0.15 + 0.58 / (1 + Math.exp(-1.5 * (c - 2.8))), 0.2, 0.8);
  }

  /* ===== 更新UI ===== */
  function updateUI() {
    document.getElementById('concVal').textContent = concentration.toFixed(1);
    document.getElementById('migVal').textContent = migrationNum.toFixed(2);
    document.getElementById('rateVal').textContent = dischargeRate.toFixed(1);
    document.getElementById('gaugeVal').textContent = migrationNum.toFixed(2);
  }

  /* ===== 滑块事件 ===== */
  document.getElementById('concSlider').addEventListener('input', function() {
    concentration = parseFloat(this.value);
    migrationNum = calcMigration(concentration);
    document.getElementById('migSlider').value = migrationNum.toFixed(2);
    updateUI();
  });
  document.getElementById('migSlider').addEventListener('input', function() {
    migrationNum = parseFloat(this.value);
    updateUI();
  });
  document.getElementById('rateSlider').addEventListener('input', function() {
    dischargeRate = parseFloat(this.value);
    updateUI();
  });

  /* ===== 主动画循环 ===== */
  let lastTime = 0;
  let spawnAccum = 0;

  function animate(timestamp) {
    if (!lastTime) lastTime = timestamp;
    const dt = Math.min(timestamp - lastTime, 50); // 防跳帧
    lastTime = timestamp;

    // 生成离子
    const spawnInterval = Math.max(80, 400 - migrationNum * 300 - dischargeRate * 8);
    spawnAccum += dt;
    if (spawnAccum > spawnInterval) {
      spawnAccum = 0;
      spawnIon();
    }

    // 更新所有离子
    updateIons(dt);

    requestAnimationFrame(animate);
  }

  /* ===== 启动 ===== */
  function init() {
    migrationNum = calcMigration(concentration);
    updateUI();
    // 立即生成几颗离子
    for (let i = 0; i < 6; i++) {
      setTimeout(function() { spawnIon(); }, i * 120);
    }
    requestAnimationFrame(animate);
  }

  // 页面加载后自动启动
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  // iframe 重载时也自动启动
  window.addEventListener('load', init);
})();
</script>
</body>
</html>

实现说明

设计思路——IFR最终理想解视角：

动画直接呈现局部高浓盐体系的理想工作状态，不做前后对比，而是让观众沉浸式地观察"锂离子快车道"如何自然运作：

  1. 核心视觉叙事：三条发光"快车道"贯穿电解质区域，近裸Li⁺离子（青色高亮点）以高速沿车道从负极飞向正极，尾迹拖出渐隐光斑，直观传达"高迁移数 → 低浓差极化"的IFR状态。

  2. 资源利用的可视化：CIP（接触离子对）和AGG（聚集体）以琥珀色簇群散布在电解质中，它们是同一LiFSI盐在提高浓度后自发形成的结构——不增加新物质，仅改变配比即解决矛盾。稀少的淡蓝溶剂分子与密集的盐簇形成强烈反差，视觉上强调"弱溶剂化"的核心机制。

  3. 交互式参数探索：三个滑块（LiFSI浓度、迁移数、放电倍率）实时联动——提高浓度时迁移数自动攀升（Sigmoid模型）、离子生成更密更速；降低浓度则离子减速稀疏。用户可亲手体验参数对传输效率的直接影响。

  4. 界面层细节：SEI/CEI以紫色晶格纹理和LiF标记呈现，离子穿过时无阻碍感，暗示富LiF无机层的极高离子电导率——这是化成阶段自然形成的"免费"资源。

  5. 自动播放：页面加载后立即开始生成离子并启动动画循环，无需任何手动触发；iframe重载时同样自动恢复。

积分规则：第一轮对话扣减8分，后续每轮扣6分