返回

零基础快速制作在线PPT：reveal.js入门指南

前端

用 Reveal.js 创建出色的在线演示文稿

什么是 Reveal.js？

Reveal.js 是一款开源 HTML 幻灯片框架，让创建互动且响应式的演示文稿变得轻而易举。它基于 JavaScript、HTML 和 CSS，易于使用，并且兼容所有现代浏览器。

Reveal.js 的优势

  • 易于使用： 基于熟悉的 Web 技术，学习曲线低。
  • 兼容性强： 在所有现代浏览器中都能完美运行。
  • 支持多种媒体格式： 轻松添加图片、视频、音频和代码。
  • 丰富的过渡效果和动画： 让演示文稿动感十足，引人入胜。
  • 可定制性强： 提供多种主题和皮肤，方便根据需要调整幻灯片外观。

如何上手 Reveal.js

安装

通过 CDN 或 npm 安装 Reveal.js：

<!-- CDN -->
<link rel="stylesheet" href="https://unpkg.com/reveal.js/dist/reveal.css">
<script src="https://unpkg.com/reveal.js/dist/reveal.js"></script>

<!-- npm -->
npm install reveal.js

创建幻灯片

只需创建一个 HTML 文件并添加幻灯片内容即可：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="reveal.css">
  <script src="reveal.js"></script>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>
        <h1>标题 1</h1>
        <p>内容 1</p>
      </section>
      <section>
        <h1>标题 2</h1>
        <p>内容 2</p>
      </section>
    </div>
  </div>

  <script>
    // 初始化 Reveal.js 实例
    Reveal.initialize({
      controls: true,   // 显示底角控制按钮
      progress: true,   // 显示进度条
      slideNumber: true // 显示幻灯片编号
    });
  </script>
</body>
</html>

运行幻灯片

保存 HTML 文件，在浏览器中打开即可运行幻灯片。

进阶技巧

  • 使用主题和皮肤： 自定义幻灯片外观，提升视觉效果。
  • 添加过渡和动画： 让幻灯片动感十足，吸引观众注意力。
  • 利用媒体格式： 增强演示内容，轻松添加图片、视频、音频和代码。
  • 代码高亮： 美化代码，让技术演示更清晰明了。

结论

Reveal.js 是一款功能强大的在线 PPT 制作工具，让创建互动式演示文稿变得前所未有的轻松。无论是技术演示还是创意分享，Reveal.js 都能满足你的需求。

常见问题解答

1. 如何更改幻灯片主题？

使用 Reveal.js 的 theme 选项，例如：

Reveal.initialize({ theme: 'black' });

2. 如何添加自定义过渡效果？

使用 Reveal.js 的 transition 选项，例如：

Reveal.initialize({ transition: 'zoom' });

3. 如何在幻灯片中插入视频？

使用 <video> 标签，例如：

<video src="myvideo.mp4" controls></video>

4. 如何添加代码高亮？

使用 Reveal.js 的 highlight 插件，例如：

Reveal.initialize({
  plugins: [RevealHighlight]
});

5. 如何在演示文稿中使用音频？

使用 <audio> 标签，例如：

<audio src="myaudio.mp3" controls></audio>