用reveal.js和HTML5制作幻灯片，炫到没朋友！
1、首先下载reveal.js，然后引入
2、在index.html里面引入css和js，我写的简单demo如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="css/reveal.css"><link rel="stylesheet" href="css/theme/league.css"><!--Add support for earlier versions of Internet Explorer --><!--[if lt IE 9]><script src="lib/js/html5shiv.js"></script><![endif]--></head><body><div class="reveal"><div class="slides"><section data-transition="zoom"> <h1>Single Horizontal Slide</h1> </section><section><section ><p class="fragment">Vertical Slide 1</p><!--fragment是碎片展示--><p class="fragment">Vertical Slide 2</p><p class="fragment">Vertical Slide 3</p></section><section data-background="url(images/12.jpg)">Vertical Slide dsd</section><!--图片直接这样引用--></section></div><div class="slides"><section data-transition="zoom">Happy New Year!</section><section >Happy New Year!5656</section><section >Happy New Year!5646</section><section >Happy New Year!46456</section><section><section data-background-transition="zoom" data-background="#defbbc"> <h1>Vertical Slide 1</h1> </section><section data-transition="zoom">Vertical Slide 2</section><section data-transition="convex">Vertical Slide 3</section><section data-transition="">Vertical Slide 4</section></section></div><script src="lib/js/head.min.js"></script><script src="js/reveal.js"></script><script>Reveal.initialize({// controls:false //只用空格切换transition:'convex',//切换过渡效果backgroundTransition: 'convex',// 全屏幻灯片背景的过渡效果});</script></body></html>
3、一些注意：
（1）data-background 属性来在幻灯片之外添加整个页面的背景。支持四种类型的背景： color, image, video 和 iframe
（2）点击 "Esc" 或 "o" 键来切换概览模式
（3）键盘上点击 »F« 按键即可进入全屏模式。点击 »ESC« 按键退出全屏模式
（4）嵌入的 HTML5 <video>/<audio> 以及 YouTube 内联框架将会在你从一个幻灯片导航离开的时候自动暂停。这可以通过给你的元素指定一个 data-ignore 属性来禁止。
（5）局幻灯片切换效果是通过 transition 配置值来设定的。你可以通过指定<section>元素的 data-transition 属性来重写全局配置。支持效果： none/fade/slide/convex/concave/zoom
