纯HTML+CSS模拟PPT翻页效果的核心是用position: fixed+z-index控制全屏层级，每页为<section>，当前页设display: block; opacity: 1; visibility: visible;并覆盖全屏，其余页opacity: 0; visibility: hidden;，配合transition: opacity 0.3s ease实现淡入淡出，键盘（空格/方向键）和按钮触发原生JS切换，打印时通过@media print重置为静态流式布局。
用纯 HTML + CSS 模拟 PPT 翻页效果，核心靠 position: fixed + z-index 控制层级
不是所有场景都需要 reveal.js 或 impress.js，如果只是几页静态内容、要嵌入现有网页、或需完全可控的样式，手写一个“类PPT”单页更轻量、更易调试。
关键思路：每页是一个 <section>，默认 display: none；当前页设为 display: block 且 position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100，其他页保持隐藏或低 z-index。这样避免滚动干扰，视觉上就是全屏切换。
- 不要用
transform: translateZ()或perspective做“3D翻页”——动画难控、移动端兼容差、实际阅读体验反而割裂 - 每页
<section>必须设overflow: hidden，否则长内容会撑破全屏布局 - 字体大小建议用
vh单位（如font-size: 4.5vh），比rem更适配不同屏幕高度
键盘和点击翻页：监听 keydown 和 click 事件控制 currentSlide 索引
用户习惯按空格、→、↓ 翻下一页，←、↑ 翻上一页。不依赖第三方库，原生 JS 就够用。
注意：必须阻止默认行为（比如空格键触发页面滚动），否则会和翻页逻辑冲突。
立即学习“前端免费学习笔记（深入）”；
- 监听
document.addEventListener('keydown', e => { ... })，对e.key做判断，匹配'ArrowRight'、' '（空格）、'ArrowDown'时调用goToNext() -
goToNext()内部检查currentSlide < slides.length - 1，越界就静默，不报错也不跳转 - 给每页底部加一个半透明
<div class="next-btn">，click时也触发goToNext()—— 触屏设备必须有这个 fallback - 别忘了在
goToPrev()里限制currentSlide > 0，否则索引变负数，slides[-1]是undefined，后续操作会报错Cannot read property 'classList' of undefined
CSS 动画过渡要谨慎：用 opacity + visibility，别碰 display
想加淡入淡出？可以。但直接用 display: none ↔ block 无法触发 CSS 过渡动画，因为 display 不是可动画属性。
正确做法是：用 opacity: 0/1 控制透明度，配合 visibility: hidden/visible 防止占位和点击穿透，再加 transition: opacity 0.3s ease。
- 当前页：设置
opacity: 1; visibility: visible; - 非当前页：统一设
opacity: 0; visibility: hidden;，不能只设opacity: 0，否则仍可被聚焦、被屏幕阅读器读取 - 动画时间别超过
0.4s，否则演示节奏拖沓；也别低于0.15s，人眼感知不到变化，显得“卡顿” - 禁用
pointer-events: none在隐藏页上——它会让页面失去焦点，影响键盘导航恢复
导出为 PDF 时页面错乱？用 @media print 重置布局
Chrome / Edge 直接打印当前页，常出现内容截断、空白页、字体缩放异常。这不是代码写错了，而是浏览器默认把 position: fixed 元素当成“浮动层”，PDF 导出时忽略其位置上下文。
解决方案：专门写一段打印样式，让每页回归文档流，用分页符控制断点。
- 在
<style>里加@media print { section { position: static !important; page-break-after: always; } } - 删掉所有
height: 100vh、overflow: hidden等破坏打印流的声明 - PDF 导出前手动执行
window.print()，不要依赖右键“打印”，后者可能绕过你写的@media print - 如果某页内容太多导致自动分页撕裂标题，给该页加
page-break-inside: avoid
真正麻烦的是字体嵌入——系统字体在 PDF 里可能被替换成宋体或 Helvetica。如果必须保形，得用 @font-face 加载 Web 字体并指定 font-display: swap，但要注意 license 是否允许嵌入 PDF。
