@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 }
            ]
        });

一些常用配置说明