@TOC

如何用reveal.js写一个PPT

reveal.js是一个能够帮助我们很轻易地使用 HTML 创建一个漂亮的演示文稿的插件
git： https://github.com/hakimel/reveal.js/releases

开始使用

首先下载reveal.js

这是它的目录结构 在这里插入图片描述

我们需要的东西就在js文件夹和plugin文件夹和css文件夹里面
然后新建一个工程，把我们需要的东西挪过去

reveal.js写法介绍

在头文件引入这些css文件

        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/reveal.css">
        <link rel="stylesheet" href="css/theme/black.css" id="theme">
        <!-- Theme used for syntax highlighting of code -->
        <link rel="stylesheet" href="lib/css/monokai.css">

然后开始写body

<div class="reveal">
    <div class="slides">
        我们的所有内容都要写在这里
    </div>
</div>

一个<section>标签就是一张ppt
<section>里面嵌套<section>就可以上下翻页
比如
<section>
    <section>
        第一页
    </section>
    <section>
        第二页
    </section>
</section>

如何写动画

reveal自带的动画有grow，shrink，fade-out，fade-right，fade-up，fade-down，fade-left，fade-in-then-out，fade-in-then-semi-out

// 就是给你需要添加动画的文字加上对应的ckass
// 并且fragment是必须加的，你也可以去自己自定义动画
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p>
<p>
    <span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
    <span style="display: inline-block;" class="fragment fade-up">up, </span>
    <span style="display: inline-block;" class="fragment fade-down">down, </span>
    <span style="display: inline-block;" class="fragment fade-left">left</span>
</p>
<p class="fragment fade-in-then-out">fade-in-then-out</p>
<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>

动态切换过场动画

<p>
    <a href="?transition=none#/transitions">None</a> -
    <a href="?transition=fade#/transitions">Fade</a> -
    <a href="?transition=slide#/transitions">Slide</a> -
    <a href="?transition=convex#/transitions">Convex</a> -
    <a href="?transition=concave#/transitions">Concave</a> -
    <a href="?transition=zoom#/transitions">Zoom</a>
</p>

就是这么简单，把动画名添加到链接上，reveal.js会帮你做切换

动态切换主题

<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black(default)</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a>
 <a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>

原理就是改变head中 id='theme'的那个css链接

Markdown支持

<section data-markdown>
# 一级标题
## 二级标题
</section>

Markdown支持需要加载Markdown.js插件并且在section标签中加入data-markdown属性，但是好像markdown的功能支持的不是很好的亚子

代码高亮

代码高亮需要加载插件highlight.js

<pre>
    <code>
        在这里写代码就能高亮， 当然记住要包在section里
    </code>
</pre>

设置背景

可以单独给每个section设置背景，包括背景颜色，背景图片，甚至可以放视频

<section data-background="#ddd">
这是背景 颜色
</section>
<section data-background="./images.jpg">
这是背景图片
</section>
<section data-background-video="./MP4/mp4.mp4">
这是背景视频，视频支持.mp4.webm.gif格式
</section>

嵌入其他页面

<section data-background-iframe="http://www.someurl.com/" data-background-interactive>
</section>

最后是初始化

Reveal.initialize({
            controls: true,
            progress: true,
            center: true,
            hash: true,
            transition: 'slide', // none/fade/slide/convex/concave/zoom

            dependencies: [
                { src: 'plugin/markdown/marked.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
                { src: 'plugin/markdown/markdown.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
                { src: 'plugin/highlight/highlight.js', async: true },
                { src: 'plugin/search/search.js', async: true },
                { src: 'plugin/zoom-js/zoom.js', async: true },
                { src: 'plugin/notes/notes.js', async: true }
            ]
        });

一些常用配置说明

字段	类型	作用	默认
controls	boolean	显示箭头	true
controlsTutorial	boolean	箭头更友好的动画	true
controlsLayout	string	箭头的位置	‘bottom-right’
controlsBackArrows	string	后退箭头的样式	‘fade’
progress	boolean	进度条	true
slideNumber	boolean	在右下角显示页数	false
keyboard	boolean	是否键盘控制	true
disableLayout	boolean	取消reveal.js的默认布局	false
center	boolean	上下左右居中	true
fragments	boolean	是否逐帧播放动画	true
transition	string	默认的过场动画	slide
transitionSpeed	string	过场动画速度	default 可选default/fast/slow
backgroundTransition	string	背景切换动画	fade可选none/fade/slide/convex/concave/zoom