HTML制作PPT风格页面教程及代码分享

• 不要用 transform: translateZ() 或 perspective 做“3D翻页”——动画难控、移动端兼容差、实际阅读体验反而割裂
• 每页
  必须设 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，越界就静默，不报错也不跳转
• 给每页底部加一个半透明
  ，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 导出时忽略其位置上下文。

解决方案：专门写一段打印样式，让每页回归文档流，用分页符控制断点。

• 在
  

  密码登录在这里

  微信扫码登录或注册

  

  打开微信扫一扫，快速登录/注册

  登录即同意 用户协议 和 隐私政策

  微信登录更方便

  • 密码登录
  • 注册账号

  

  忘记密码

  登录

  

  注册

  登录即同意 用户协议 和 隐私政策

  返回登录

  • 重置密码

  发送验证码

  重置密码