个人已完成2026年6月

PPT 设计作品集

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

PPT设计HTMLPythonHTMLCSSJavaScript设计系统

📋 项目概览

技术栈

HTMLCSSJavaScript设计系统

源码路径📂projects-source/个人项目/ppt-design

功能特性

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

📖 技术分析报告在 GitHub 查看 ↗

PPT 设计作品集

项目概述

用 HTML/CSS/JavaScript 呈现的 PPT 设计作品集。无需 PPT 软件，浏览器打开即用。每套作品独立视觉主题，覆盖日系动漫、古风聊斋、现代演讲三种风格，另有 AI 认知主题在内。

作品清单

作品	文件	风格	特点
动漫文化导览	`anime.html`	日系暗色	渐变光效、信息分层、产业数据可视化
聊斋志异	`ghost-stories.html`	古风暗色	书法字体、墨迹纹理、竖排文字、朱砂点缀
演讲艺术	`presentation-mastery.html`	现代暖色	极简版式、信息密度高、实战框架
AI 认知跃迁	`index.html`	科技暗色	无衬线字体、1920×1080 固定舞台、打印支持

技术架构

幻灯片引擎（通用框架）

所有作品共享相同的翻页系统：

CSS:    .slide.active → visibility + opacity 过渡
JS:     keydown 监听（ArrowLeft/Right） + 导航点点击
布局:   固定 1920×1080 舞台（部分作品使用视口自适应）

核心代码量

// 通用翻页引擎（每套约 30 行）
let current = 0;
const slides = document.querySelectorAll('.slide');

function goTo(index) {
  slides.forEach(s => s.classList.remove('active'));
  slides[index].classList.add('active');
  current = index;
}

document.addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') goTo(current + 1);
  else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') goTo(current - 1);
});

设计系统（以聊斋为例）

设计元素	实现	效果
背景	`radial-gradient` 多层叠加	墨迹晕染感
标题	`writing-mode: vertical-rl`	竖排古风
主色	`#c0392b` 朱砂红	古典点缀
字体	`Noto Serif SC`	书法质感
纹理	`::before` 伪元素渐变	纸张肌理

设计原则

风格统一：每套作品内部保持色彩、字体、间距的系统一致性
内容优先：版式为信息传达服务，不做过度装饰
高密度：单页承载 5-8 个信息点，无废页
可访问性：纯键盘操作，色觉友好

🚀 在线演示新窗口打开 ↗

💻 核心代码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; }

📁 源文件清单GitHub 仓库 ↗

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