reveal.js

结构

<section>Single Horizontal Slide</section>
<section>
    <section>1.1</section>
    <section>1.2</section>
</section>
<section>2</section>

展示动画

<section>slide 1</section>                                      
<section>                                                       
    <p>slide 2</p>                                              
    <p class="fragment visible" data-fragment-index="0">p0</p>  
    <p class="fragment visible" data-fragment-index="2">p2</p>  
    <p class="fragment visible" data-fragment-index="1">p1</p>                                                                                        
</section>   

<section>
    <p class="fragment visible">visible</p>
    <p class="fragment grow">grow</p>
    <p class="fragment shrink">shrink</p>
    <p class="fragment fade-out">fade-out</p>
    <p class="fragment fade-up">fade-up (also down, left and right!)</p>
    <p class="fragment current-visible">visible only once</p>
    <p class="fragment highlight-current-blue">blue only once</p>
    <p class="fragment highlight-red">highlight-red</p>
    <p class="fragment highlight-green">highlight-green</p>
    <p class="fragment highlight-blue">highlight-blue</p>
</section>

多效果重叠

<section>
    <span class="fragment fade-in">
        <span class="fragment fade-out">I'll fade in, then out</span>
    </span>
</section>

效果的展示顺序

<section>
    <p class="fragment" data-fragment-index="3">Appears last</p>
    <p class="fragment" data-fragment-index="1">Appears first</p>
    <p class="fragment" data-fragment-index="2">Appears second</p>
</section>

幻灯片过渡效果

<section data-transition="zoom">
    <h2>This slide will override the presentation transition and zoom!</h2>
</section>

<section data-transition-speed="fast">
    <h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>

更改主题

<link rel="stylesheet" href="css/theme/black.css" id="theme">


black: Black background, white text, blue links (default theme)
white: White background, black text, blue links
league: Gray background, white text, blue links (default theme for reveal.js < 3.0.0)
beige: Beige background, dark text, brown links
sky: Blue background, thin dark text, blue links
night: Black background, thick white text, orange links
serif: Cappuccino background, gray text, brown links
simple: White background, black text, blue links
solarized: Cream-colored background, dark green text, blue links

幻灯片背景设置
1.css控制样式

<section data-background-color="#ff0000">
    <h2>Color</h2>
</section>

2.img控制背景

<section data-background-image="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
    <h2>This background image will be sized to 100px and repeated</h2>
</section>

3.video

<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
    <h2>Video</h2>
</section>

4.iframe

<section data-background-iframe="https://slides.com" data-background-interactive>
    <h2>Iframe</h2>
</section>

5.背景的转换效果

<section data-background-transition="zoom">

内部连接跳转

<a href="#/2/2">Link</a> # 按section索引
<a href="#/some-slide">Link</a>按id索引

演讲者模式
按s打开

暂停
.

查看大纲
esc

zoom
ctrl + 左键

参考文献：
https://github.com/hakimel/reveal.js
https://www.helloweba.net/javascript/378.html
https://www.jianshu.com/p/471a8114a31e