个人已完成2026年6月

PPT 设计作品集

用 HTML 呈现的 PPT 设计作品集——三套完整方案，涵盖日系动漫、古风聊斋、现代演讲三种风格，展现视觉设计和排版能力。

PPT设计HTMLPythonHTMLCSSJavaScript设计系统

📋 项目概览

技术栈

HTMLCSSJavaScript设计系统

功能特性

3 套完整 PPT 设计作品：动漫文化导览、聊斋志异、演讲艺术
纯 HTML/CSS 实现幻灯片效果，无需 PPT 软件
响应式键盘/鼠标翻页导航
深色/浅色多主题配色方案
每页独立视觉风格（日系、古风、现代）

🚀 在线演示新窗口打开 ↗

💻 核心代码HTML · CSS · JavaScript · 设计系统

javascript幻灯片框架（通用翻页系统）index.html (幻灯片框架) · 32 行

纯 CSS/JS 幻灯片引擎，支持键盘方向键和点按导航。每页独立视觉风格，无缝过渡。

// ── 幻灯片引擎 ──
let current = 0;
const slides = document.querySelectorAll(&#39;.slide&#39;);
const dots = document.querySelectorAll(&#39;.nav-dot&#39;);

function goTo(index) {
  slides.forEach(s =&gt; s.classList.remove(&#39;active&#39;));
  dots.forEach(d =&gt; d.classList.remove(&#39;active&#39;));
  slides[index].classList.add(&#39;active&#39;);
  dots[index].classList.add(&#39;active&#39;);
  current = index;
}

// 键盘导航
document.addEventListener(&#39;keydown&#39;, e =&gt; {
  if (e.key === &#39;ArrowRight&#39; || e.key === &#39;ArrowDown&#39;) {
    if (current &lt; slides.length - 1) goTo(current + 1);
  } else if (e.key === &#39;ArrowLeft&#39; || e.key === &#39;ArrowUp&#39;) {
    if (current &gt; 0) goTo(current - 1);
  }
});

// 导航点点击
dots.forEach((dot, i) =&gt; dot.addEventListener(&#39;click&#39;, () =&gt; goTo(i)));

// 箭头按钮
document.querySelector(&#39;.arrow-right&#39;).addEventListener(&#39;click&#39;, () =&gt; {
  if (current &lt; slides.length - 1) goTo(current + 1);
});
document.querySelector(&#39;.arrow-left&#39;).addEventListener(&#39;click&#39;, () =&gt; {
  if (current &gt; 0) goTo(current - 1);
});

css视觉主题示例（古风·聊斋）ghost-stories.html (古风主题 CSS) · 33 行

以《聊斋志异》为例的古风暗色主题设计：书法字体、墨迹纹理、竖排文字布局。

/* 聊斋 - 暗色古风主题 */
body { background: #1a1410; }

/* 封面：墨迹晕染 */
.bg-ink {
  background: radial-gradient(ellipse at 50% 40%, #2a1a10 0%, #0d0805 100%);
}
.bg-ink::before {
  content: &#39;&#39;; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(80,40,20,0.3) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(40,20,10,0.4) 0%, transparent 50%);
}

/* 竖排文字 */
.text-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.3em;
}

/* 水墨标题 */
.title-brush {
  font-family: &#39;Noto Serif SC&#39;, serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  color: #e8d5c0;
  text-shadow: 0 4px 40px rgba(0,0,0,0.8);
  line-height: 1.6;
}

/* 朱砂点缀 */
.accent-cinnabar { color: #c0392b; }

📁 源文件清单

路径	说明	行数
`index.html`	动漫文化导览	220
`ghost-stories.html`	聊斋志异（古风暗色）	195
`presentation-mastery.html`	演讲艺术（现代风）	180