@TOC

如何用reveal.js寫一個PPT

reveal.js是一個能夠幫助我們很輕易地使用 HTML 創(chuàng)建一個漂亮的演示文稿的插件
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">
        我們的所有內(nèi)容都要寫在這里
    </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>

動態(tài)切換過場動畫

<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會幫你做切換

動態(tài)切換主題

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

一些常用配置說明