秀米SVG导出

生成兼容微信公众号的纯CSS交互HTML代码，可直接复制到秀米编辑器中使用。使用 checkbox + :checked 伪类实现点击展开交互，无需JavaScript。
使用说明

点击「复制HTML代码」按钮
打开秀米编辑器，选择「图文模板」
在编辑区域切换到「代码模式」
粘贴复制的HTML代码
切换回「可视化模式」预览效果
根据需要在秀米中微调样式和文字
同步到微信公众号后台发布
<!--
  全民国家安全教育日 - 互动漫画SVG
  适用于秀米编辑器 / 微信公众号
  使用纯CSS交互（checkbox + :checked），无JavaScript
  宽度：100%自适应，建议在秀米中设置最大宽度672px
-->
<section style="margin:0;padding:0;max-width:672px;margin-left:auto;margin-right:auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;">
<style>
  /* 隐藏所有checkbox */
  .svg-cb { position:absolute;opacity:0;width:0;height:0;pointer-events:none; }
  /* 默认隐藏的内容区块 */
  .svg-hidden { max-height:0;overflow:hidden;opacity:0;transition:max-height 0.8s ease,opacity 0.6s ease; }
  /* checkbox被选中时展开对应区块 */
  #cb-start:checked ~ .wrap .sec-s1 { max-height:99999px;opacity:1; }
  #cb-s1-done:checked ~ .wrap .sec-s1-comic { max-height:99999px;opacity:1; }
  #cb-s2:checked ~ .wrap .sec-s2 { max-height:99999px;opacity:1; }
  #cb-s2-done:checked ~ .wrap .sec-s2-comic { max-height:99999px;opacity:1; }
  #cb-s3:checked ~ .wrap .sec-s3 { max-height:99999px;opacity:1; }
  #cb-s3-done:checked ~ .wrap .sec-s3-comic { max-height:99999px;opacity:1; }
  #cb-end:checked ~ .wrap .sec-end { max-height:99999px;opacity:1; }
  /* 按钮被点击后隐藏 */
  #cb-start:checked ~ .wrap .btn-start { display:none; }
  #cb-s1-done:checked ~ .wrap .btn-s1 { display:none; }
  #cb-s2:checked ~ .wrap .btn-s2-trigger { display:none; }
  #cb-s2-done:checked ~ .wrap .btn-s2 { display:none; }
  #cb-s3:checked ~ .wrap .btn-s3-trigger { display:none; }
  #cb-s3-done:checked ~ .wrap .btn-s3 { display:none; }
  #cb-end:checked ~ .wrap .btn-end-trigger { display:none; }
  /* 热点点击展开 */
  #cb-hs1:checked ~ .wrap .hs1-reveal { display:block; }
  #cb-hs1:checked ~ .wrap .hs1-hide { display:none; }
  #cb-hs2:checked ~ .wrap .hs2-reveal { display:block; }
  #cb-hs2:checked ~ .wrap .hs2-hide { display:none; }
  #cb-hs3:checked ~ .wrap .hs3-reveal { display:block; }
  #cb-hs3:checked ~ .wrap .hs3-hide { display:none; }
  /* 科普卡片展开 */
  #cb-card1:checked ~ .wrap .card1-body { max-height:800px;opacity:1; }
  #cb-card2:checked ~ .wrap .card2-body { max-height:800px;opacity:1; }
  #cb-card3:checked ~ .wrap .card3-body { max-height:800px;opacity:1; }
  /* 通用按钮样式 */
  .svg-btn {
    display:block;width:60%;margin:0 auto;padding:14px 0;text-align:center;
    background:#2B3A5C;color:#D4A853;font-size:16px;font-weight:700;
    letter-spacing:3px;border:2.5px solid #111;cursor:pointer;
    box-shadow:3px 3px 0 rgba(0,0,0,0.2);
  }
  .svg-btn:active { transform:translateY(1px);box-shadow:1px 1px 0 rgba(0,0,0,0.2); }
  /* 章节标题 */
  .ch-title {
    width:100%;padding:20px 0;text-align:center;background:#2B3A5C;
    font-size:20px;font-weight:800;color:#D4A853;letter-spacing:4px;
  }
  .ch-sub { font-size:12px;color:rgba(255,255,255,0.5);margin-top:4px;letter-spacing:2px; }
  /* 转场条 */
  .trans-bar {
    width:100%;padding:14px 0;text-align:center;
    background:linear-gradient(135deg,#2B3A5C 0%,#3d5a80 50%,#2B3A5C 100%);
    font-size:14px;color:rgba(255,255,255,0.8);letter-spacing:2px;font-weight:600;
  }
  /* 对话气泡 */
  .bubble {
    position:absolute;z-index:10;pointer-events:none;
    max-width:46%;
  }
  .bubble-inner {
    background:#fff;border:2.5px solid #222;border-radius:18px;
    padding:10px 14px;box-shadow:2px 3px 0 rgba(0,0,0,0.12);
  }
  .bubble-narrator .bubble-inner {
    background:rgba(43,58,92,0.92);border-color:#D4A853;border-radius:4px;
  }
  .bubble-narrator .bubble-text { color:#fff; }
  .bubble-text { margin:0;font-size:13px;line-height:1.65;font-weight:500;color:#1a1a1a; }
  /* 科普卡片 */
  .card-header {
    width:100%;padding:16px 20px;background:#2B3A5C;
    display:flex;align-items:center;justify-content:space-between;cursor:pointer;
    border-bottom:3px solid #111;box-sizing:border-box;
  }
  .card-icon {
    width:28px;height:28px;border-radius:6px;background:#D4A853;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:900;font-size:14px;color:#fff;flex-shrink:0;
  }
  .card-title { font-weight:700;color:#D4A853;font-size:16px;letter-spacing:1px;margin-left:10px; }
  .card-body {
    max-height:0;overflow:hidden;opacity:0;transition:max-height 0.5s ease,opacity 0.4s ease;
    background:#FFFDE7;border:2.5px solid #111;border-top:none;padding:0 20px;
  }
  .card-body-inner { padding:20px 0; }
  .card-body p { font-size:14px;line-height:1.9;color:#333;margin:0 0 12px 0; }
  .card-tag {
    display:inline-block;background:rgba(212,168,83,0.15);
    border:1px solid rgba(212,168,83,0.4);border-radius:4px;
    padding:4px 10px;font-size:12px;color:#8B6914;font-weight:600;margin:0 8px 8px 0;
  }
  .card-source { margin-top:14px;font-size:12px;color:#999;border-top:1px dashed #ddd;padding-top:10px; }
  /* 热点标记 */
  .hotspot-mark {
    position:absolute;z-index:20;width:56px;height:56px;cursor:pointer;
    transform:translate(-50%,-50%);
  }
  .hotspot-circle {
    width:100%;height:100%;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,0.35) 0%,rgba(255,255,255,0.1) 70%);
    border:3px solid rgba(255,255,255,0.85);
    display:flex;align-items:center;justify-content:center;
    backdrop-filter:blur(3px);box-shadow:0 0 16px rgba(255,255,255,0.5);
  }
  .hotspot-q { font-size:22px;color:#fff;font-weight:800;text-shadow:0 2px 4px rgba(0,0,0,0.5); }
  .hotspot-done {
    width:40px;height:40px;border-radius:50%;border:2px solid #fff;
    display:flex;align-items:center;justify-content:center;font-size:16px;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
  }
  .hotspot-safe { background:rgba(34,197,94,0.85); }
  .hotspot-threat { background:rgba(220,38,38,0.85); }
  .hs1-reveal,.hs2-reveal,.hs3-reveal { display:none; }
  /* 图片容器 */
  .img-wrap { position:relative;width:100%;font-size:0;line-height:0; }
  .img-wrap img { width:100%;height:auto;display:block; }
  /* 按钮容器 */
  .btn-wrap { width:100%;padding:28px 0;text-align:center;background:#f5f0e0; }
</style>

<!-- 所有checkbox放在最前面（秀米要求） -->
<input class="svg-cb" type="checkbox" id="cb-start" />
<input class="svg-cb" type="checkbox" id="cb-s1-done" />
<input class="svg-cb" type="checkbox" id="cb-s2" />
<input class="svg-cb" type="checkbox" id="cb-s2-done" />
<input class="svg-cb" type="checkbox" id="cb-s3" />
<input class="svg-cb" type="checkbox" id="cb-s3-done" />
<input class="svg-cb" type="checkbox" id="cb-end" />
<input class="svg-cb" type="checkbox" id="cb-hs1" />
<input class="svg-cb" type="checkbox" id="cb-hs2" />
<input class="svg-cb" type="checkbox" id="cb-hs3" />
<input class="svg-cb" type="checkbox" id="cb-card1" />
<input class="svg-cb" type="checkbox" id="cb-card2" />
<input class="svg-cb" type="checkbox" id="cb-card3" />

<div class="wrap" style="width:100%;overflow:hidden;">

  <!-- ========== 封面 ========== -->
  <div class="img-wrap">
    <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene01_v2-my4mYkrpUVSNFSBcMWRX85.webp" />
    <div style="position:absolute;bottom:0;left:0;right:0;padding:0 24px 18%;text-align:center;background:linear-gradient(transparent 0%,rgba(0,0,0,0.5) 100%);">
      <div style="font-size:28px;font-weight:900;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,0.6);letter-spacing:5px;line-height:1.5;">全民国家安全教育日</div>
      <div style="font-size:15px;color:rgba(255,255,255,0.9);text-shadow:0 1px 6px rgba(0,0,0,0.5);letter-spacing:3px;margin-top:8px;">海边生活多留意，避开国安小“雷区”</div>
    </div>
  </div>

  <!-- 检察院门口对话 -->
  <div class="img-wrap">
    <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene02_v2-8KzniAdY7wJARjwSR5Tf5A.webp" />
    <div class="bubble" style="left:52%;top:5%;"><div class="bubble-inner"><p class="bubble-text">说到国家安全，好像都是电影里那种惊心动魄的事？</p></div></div>
      <div class="bubble" style="left:3%;top:22%;max-width:50%;"><div class="bubble-inner"><p class="bubble-text">恰恰相反。真正的“雷”，往往藏在最平静的日常里。走，我带你去“排排雷”！</p></div></div>
  </div>

  <!-- 开始按钮 -->
  <div class="btn-wrap btn-start">
    <label for="cb-start" class="svg-btn">跟着检察官去排「雷」</label>
  </div>

  <!-- ========== 第一站：海湾 ========== -->
  <div class="svg-hidden sec-s1">
    <div class="ch-title">第一站 &middot; 海湾<div class="ch-sub">海滩霸主</div></div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/explore_scene1_v3-A2Q428YkvWoFZHS39XSyX3.webp" />
      <!-- 热点1：背包（安全） -->
      <label for="cb-hs1" class="hotspot-mark hs1-hide" style="left:78%;top:90%;">
        <div class="hotspot-circle"><span class="hotspot-q">?</span></div>
      </label>
      <div class="hs1-reveal hotspot-mark" style="left:78%;top:90%;">
        <div class="hotspot-done hotspot-safe">&#x2705;</div>
      </div>
      <!-- 热点2：快递车（安全） -->
      <label for="cb-hs2" class="hotspot-mark hs2-hide" style="left:72%;top:50%;">
        <div class="hotspot-circle"><span class="hotspot-q">?</span></div>
      </label>
      <div class="hs2-reveal hotspot-mark" style="left:72%;top:50%;">
        <div class="hotspot-done hotspot-safe">&#x2705;</div>
      </div>
      <!-- 热点3：海湾植物（威胁） -->
      <label for="cb-hs3" class="hotspot-mark hs3-hide" style="left:30%;top:60%;">
        <div class="hotspot-circle"><span class="hotspot-q">?</span></div>
      </label>
      <div class="hs3-reveal hotspot-mark" style="left:30%;top:60%;">
        <div class="hotspot-done hotspot-threat">&#x26A0;&#xFE0F;</div>
      </div>
      <div style="position:absolute;bottom:20px;left:0;right:0;text-align:center;">
        <span style="display:inline-block;padding:10px 20px;background:rgba(0,0,0,0.65);color:#fff;font-size:14px;border-radius:24px;letter-spacing:1px;">点击画面中的 ? 找出隐藏的“雷”</span>
      </div>
    </div>
    <!-- 找到威胁后展开漫画的按钮 -->
    <div class="btn-wrap btn-s1">
      <label for="cb-s1-done" class="svg-btn">🔍 发现威胁，展开调查</label>
    </div>
  </div>

  <!-- 第一站漫画展开 -->
  <div class="svg-hidden sec-s1-comic">
    <div class="trans-bar">🔍 发现威胁，展开调查...</div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene05_v3c-en3723Zf7xBPyYqdSoX4yj.webp" />
      <div class="bubble" style="left:50%;top:3%;"><div class="bubble-inner"><p class="bubble-text">这草长得高大茂密，头部形似有点像稻穗，叶片多且细长，风中轻轻摇曳还挺好看。</p></div></div>
      <div class="bubble" style="left:3%;top:20%;"><div class="bubble-inner"><p class="bubble-text">好看？这可是互花米草。</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene06_v2-Pedxjczp83YkzvFg6FtJSP.webp" />
      <div class="bubble" style="left:52%;top:3%;"><div class="bubble-inner"><p class="bubble-text">传说中的“海滩霸主”？！</p></div></div>
      <div class="bubble" style="left:2%;top:22%;max-width:50%;"><div class="bubble-inner"><p class="bubble-text">没错，正是它。互花米草的繁殖力极强，不仅会堵塞航道、影响水质，还会大面积侵占滩涂，严重破坏底栖生物、鱼类和鸟类的栖息环境，严重影响生物多样性。</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene07_v2-JJV2bmAWaBsK9z4BnmafLi.webp" />
      <div class="bubble" style="left:52%;top:3%;"><div class="bubble-inner"><p class="bubble-text">一株草的危害竟然这么大。</p></div></div>
      <div class="bubble" style="left:3%;top:20%;"><div class="bubble-inner"><p class="bubble-text">生物安全是国家安全的重要组成部分，别被看似平常的风景迷了眼。</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene08_v2-mVbapcsBDdQUazgwfqD2zR.webp" />
      <div class="bubble bubble-narrator" style="left:10%;top:5%;max-width:80%;"><div class="bubble-inner"><p class="bubble-text">原来，国家安全就藏在这每一寸滩涂里。</p></div></div>
    </div>
    <!-- 科普卡片1 -->
    <div>
      <label for="cb-card1" class="card-header">
        <div style="display:flex;align-items:center;"><div class="card-icon">!</div><span class="card-title">科普小卡片：互花米草</span></div>
        <span style="color:#D4A853;font-size:12px;">&#x25BC;</span>
      </label>
      <div class="card-body card1-body">
        <div class="card-body-inner">
          <p>互花米草，原产于北美东海岸及墨西哥湾，根系发达、繁殖力强、种群扩散极快。据研究，互花米草每平米可产生几百万颗种子，见土扎根。2003年，被列入我国第一批外来入侵物种名单。</p>
        </div>
      </div>
    </div>
    <div class="btn-wrap btn-s2-trigger">
      <label for="cb-s2" class="svg-btn">继续扫雷</label>
    </div>
  </div>

  <!-- ========== 第二站：码头 ========== -->
  <div class="svg-hidden sec-s2">
    <div class="ch-title">第二站 &middot; 码头<div class="ch-sub">“钓鱼”邮件</div></div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene10_v13_5d4754ee.png" />
    </div>
    <div class="btn-wrap btn-s2">
      <label for="cb-s2-done" class="svg-btn">🔍 发现威胁，展开调查</label>
    </div>
  </div>

  <div class="svg-hidden sec-s2-comic">
    <div class="trans-bar">🔍 发现威胁，展开调查...</div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene11_v11-XX4QqjtuyMNygYEoFXYEX4.webp" />
      <div class="bubble" style="left:52%;top:3%;"><div class="bubble-inner"><p class="bubble-text">陈哥，休假期间还在处理工作呀。</p></div></div>
      <div class="bubble" style="left:2%;top:22%;max-width:50%;"><div class="bubble-inner"><p class="bubble-text">这封邮件有点怪。休假之前手头的活儿都结了，怎么又来了个“材料汇总”……</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene12_v13b-dtegpLStFjExRKydRAgLZ9.webp" />
      <div class="bubble" style="left:2%;top:3%;max-width:50%;"><div class="bubble-inner"><p class="bubble-text">这有可能是一封被伪装成“公务往来”的“钓鱼”邮件，目的就是诱导点击，窃取信息。</p></div></div>
      <div class="bubble" style="left:52%;top:22%;"><div class="bubble-inner"><p class="bubble-text">还好没点开，看来休假也不能完全松懈放松“安全”这根弦。</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene13_v4-5XwvHpnu5aSQypuaNRf8J8.webp" />
      <div class="bubble bubble-narrator" style="left:10%;top:60%;max-width:80%;"><div class="bubble-inner"><p class="bubble-text">是啊，国家安全就藏在每一次点击之间。</p></div></div>
    </div>
    <!-- 科普卡片2 -->
    <div>
      <label for="cb-card2" class="card-header">
        <div style="display:flex;align-items:center;"><div class="card-icon">!</div><span class="card-title">科普小卡片：“钓鱼”邮件</span></div>
        <span style="color:#D4A853;font-size:12px;">&#x25BC;</span>
      </label>
      <div class="card-body card2-body">
        <div class="card-body-inner">
          <p>一些伪装成“工作通知”“业务对接”的短信或邮件，正悄然成为境外间谍情报机关或不法分子的“渗透利器”。如发现疑似境外间谍情报机关窃密线索，可拨打12339进行举报。</p>
        </div>
      </div>
    </div>
    <div class="btn-wrap btn-s3-trigger">
      <label for="cb-s3" class="svg-btn">继续扫雷</label>
    </div>
  </div>

  <!-- ========== 第三站：山脉 ========== -->
  <div class="svg-hidden sec-s3">
    <div class="ch-title">第三站 &middot; 山脉<div class="ch-sub">禁区之“眼”</div></div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene15_explore_v7_a9ce51df.png" />
    </div>
    <div class="btn-wrap btn-s3">
      <label for="cb-s3-done" class="svg-btn">🔍 发现威胁，展开调查</label>
    </div>
  </div>

  <div class="svg-hidden sec-s3-comic">
    <div class="trans-bar">🔍 发现威胁，展开调查...</div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene16_v3_33275c85.png" />
      <div class="bubble" style="left:50%;top:3%;"><div class="bubble-inner"><p class="bubble-text">地质勘探、地形测绘……现在有了无人机是真方便。</p></div></div>
      <div class="bubble" style="left:2%;top:22%;max-width:50%;"><div class="bubble-inner"><p class="bubble-text">方便是方便，但你看——那片山脉背后有军事基地，无人机要是飞进禁区就麻烦了。</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene17_v3_2f76e24b.png" />
      <div class="bubble" style="left:50%;top:3%;"><div class="bubble-inner"><p class="bubble-text">啊？那如果拍到机密画面传出去了，后果不堪设想。</p></div></div>
      <div class="bubble" style="left:2%;top:22%;max-width:50%;"><div class="bubble-inner"><p class="bubble-text">军事禁区关乎国防安全，任何一个潜在的“雷”点都绝不能放过。</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene18_v2-EHwUjm2USsjjiDumot7AhU.webp" />
      <div class="bubble bubble-narrator" style="left:10%;top:5%;max-width:80%;"><div class="bubble-inner"><p class="bubble-text">原来，国家安全就藏在这片天空里。</p></div></div>
    </div>
    <!-- 科普卡片3 -->
    <div>
      <label for="cb-card3" class="card-header">
        <div style="display:flex;align-items:center;"><div class="card-icon">!</div><span class="card-title">科普小卡片：无人机禁飞</span></div>
        <span style="color:#D4A853;font-size:12px;">&#x25BC;</span>
      </label>
      <div class="card-body card3-body">
        <div class="card-body-inner">
          <p>禁止利用无人驾驶航空器实施下列行为：违法拍摄军事设施、军工设施或者其他涉密场所；非法获取、泄露国家秘密，或者违法向境外提供数据信息。</p>
        </div>
      </div>
    </div>
    <div class="btn-wrap btn-end-trigger">
      <label for="cb-end" class="svg-btn">走向终点</label>
    </div>
  </div>

  <!-- ========== 结尾 ========== -->
  <div class="svg-hidden sec-end">
    <div class="ch-title">终点 &middot; 普法广场</div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene20_v2-4XagYwtWDyeYJMYG5L93vJ.webp" />
      <div class="bubble" style="left:50%;top:3%;"><div class="bubble-inner"><p class="bubble-text">国家安全离咱们这么近，一不小心就可能“踩雷”。</p></div></div>
      <div class="bubble" style="left:2%;top:22%;max-width:50%;"><div class="bubble-inner"><p class="bubble-text">国家安全藏在咱们每天的衣食住行里。守护国家安全，其实就是守护我们日常的每一天。</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene21_v5_32680577.png" />
      <div class="bubble" style="left:52%;top:3%;"><div class="bubble-inner"><p class="bubble-text">那咱们检察人员能做些什么？</p></div></div>
      <div class="bubble" style="left:2%;top:22%;max-width:50%;"><div class="bubble-inner"><p class="bubble-text">整治外来入侵物种，让滩涂重归洁净；严惩泄密行为，守护国家秘密；维护国防和军事利益，筑牢强军之盾。</p></div></div>
    </div>
    <div class="img-wrap">
      <img src="https://d2xsxph8kpxj0f.cloudfront.net/310519663473998772/Lg4PdgeMDLhcabeyDybvjL/scene22_v3_04fe5b06.png" />
      <div class="bubble bubble-narrator" style="left:20%;top:5%;max-width:60%;"><div class="bubble-inner"><p class="bubble-text">以法治之力，护国泰民安！</p></div></div>
    </div>
    <div style="width:100%;padding:40px 0;text-align:center;background:#2B3A5C;">
      <div style="font-size:22px;font-weight:800;color:#D4A853;letter-spacing:5px;">4.15 全民国家安全教育日</div>
      <div style="font-size:14px;color:rgba(255,255,255,0.7);letter-spacing:3px;margin-top:12px;">国家安全 人人有责</div>
    </div>
  </div>

</div>
</section>
18,846 字符
技术说明

本代码使用纯CSS实现交互，兼容微信公众号SVG规范：
交互原理：隐藏的 checkbox + label 触发 :checked 伪类 → CSS选择器控制内容区块的 max-height 和 opacity → 实现点击展开/收起效果。所有图片使用CDN外链URL，无本地依赖。气泡使用绝对定位 + 百分比坐标，自适应不同屏幕宽度。