背景：由于本人是一名前端开发工程师，而且平时喜欢把收获到的开发知识和经验进行技术分享，于是就产生了直接使用前端技术进行在线PPT制作的想法。就这样、我发现了两个非常优秀的制作在线PPT的JS库——reveal.js和impress.js。接下来我会分别以系列文章的形式进行reveal.js和impress.js的基础与应用分享，希望能帮到有同样需求的朋友。本系列文章主要是介绍reveal.js的基础和应用。

《使用前端技术制作在线PPT：reveal.js基础与应用》会以系列文章的形式，有步骤、有重点地分享我使用reveal.js实现在线PPT相关的知识和经验，目前该系列文章有如下3篇：

以下是《使用前端技术制作在线PPT：reveal.js基础与应用 02-应用样式篇》的文章正文。

1、基本用法

除了像平时做前端开发时一样使用CSS/Less对HTML PPT进行样式定义，我们还可以选择使用reveal.js提供的大量的主题样式：

.reveal {
  h1 {
    font-size: 3em;
  }
  p {
    margin: 20px auto;
  }
  .author {
    margin-top: 0;
  }
}

1.1 使用主题样式

在node_modules/reveal.js/dist/theme文件夹下，我们可以找到reveal.js提供的样式主题—— beige, black, blood, league, moon, night, serif, simple等等：

beige：米色背景，深色文字，棕色链接；
black：黑色背景，白色文本，蓝色链接（默认）；
blood：深色背景，厚白文字，红色链接；
league：灰色背景，白色文字，蓝色链接；
moon：高分辨率照片；
night：黑色背景，厚白色文字，橙色链接；
serif：卡布奇诺背景，灰色文本，棕色链接；
simple：白色背景，黑色文本，蓝色链接；
sky：蓝色背景，细暗文本，蓝色链接；
solarized：高分辨率照片；
white：白色背景，黑色文本，蓝色链接。

下面是使用了beige主题样式的效果：

在码上掘金上的实现代码如下所示：

// 查看更多主题 -> node_modules/reveal.js/dist/theme
//  beige, black, blood, league, moon, night, serif, simple, ...
import 'reveal.js@4.1.3/dist/theme/beige.css';

如果需要自定义主题样式的话，可以通过以下步骤来制作：

下载 reveal git clone git@github.com:hakimel/reveal.js.git ；
在 /css/theme/coder.scss 中复制一个文件；
运行 npm run build -- css-themes 生成css dist/coder.css。

1.2 使用切换动画

不同幻灯片进入页面的动画方式我们可以使用切换动画来设定. 以下是提供的几种默认转场动画:

none：瞬间切换背景；
fade：交叉淡入淡出 - 背景转换的默认值；
slide：在背景之间滑动 — 幻灯片过渡的默认设置；
convex：以凸角滑动；
concave：以凹角滑动；
zoom：向上缩放传入的幻灯片，使其从屏幕中心向内扩展。

下面是使用了部分切换动画的演示效果：

在码上掘金上的实现代码如下所示：

<!-- HTML PPT 标记 -->
<div class="reveal">
  <!-- HTML PPT 容器 -->
  <div class="slides">
    <!-- HTML PPT 单页 -->
    <section>Slide 1</section>
    <section>
      <section data-transition="fade">Slide 2.1</section>
      <section data-transition="convex">Slide 2.2</section>
      <section data-transition="concave">Slide 2.3</section>
      <section data-transition="zoom">Slide 2.4</section>
    </section>
    <section>Slide 3</section>
    <section>Slide 3</section>
  </div>
</div>

1.3 使用Fragments

我们可以通过Fragments用来高亮或者渐进式的展现元素。每一个包含fragment类名的元素都被视为渐进的元素，它们会通过点击下一步来依次呈现在幻灯片中。

下面是使用Fragments的演示效果：

在码上掘金上的实现代码如下所示：

<p class="fragment">Fade in</p>
<p class="fragment fade-out">Fade out</p>
<p class="fragment highlight-red">Highlight red</p>
<p class="fragment fade-in-then-out">Fade in, then out</p>
<p class="fragment fade-up">Slide up while fading in</p>

2、总结

通过以上步骤，我们能够实现对reveal.js制作的HTML PPT进行样式定制：

通过引入reveal.js的主题样式（在node_modules/reveal.js/dist/theme文件夹下），完成对PPT的整体风格的切换；
通过使用切换动画，完成HTML PPT在幻灯片进入页面时的动画方式；
通过使用Fragments来高亮或者渐进式的展现元素。

以上是我们使用reveal.js进行PPT制作时的样式定制部分，接下来我们还会通过系列文章对reveal.js进行进一步的学习和定制：

使用前端技术制作在线PPT：reveal.js基础与应用 02-定制样式篇

1、基本用法

1.1 使用主题样式

1.2 使用切换动画

1.3 使用Fragments

2、总结