使用reveal.js制作酷炫网页ppt

今天教大家使用reveal.js，制作一个简洁优雅的网页ppt。在这之前，你需要一些基本的HTML以及CSS的技能基础。

1、准备工作

下载插件，插件下载地址：

https://github.com/hakimel/reveal.js

解压文件，将相关的js以及css引入html

2、制作第一页ppt

在html页面中创建两个div块级元素，。在第二层div中创建section标签，每一个

块都生成一张单独ppt。最后，在js代码中对页面进行初始化。

保存，用浏览器打开，显示效果如下图（全屏，退出）

3、fragment类

这里再第一页的基础上再添加一个section，其中fragment类表示分条显示，当键盘按下键时触发。section中还可以包含section，放映的方式为向下放映。通过属性可以设置幻灯片的背景颜色或者图片，甚至可以使用视频当作背景。

保存一下，看看效果如下图

4、页面的配置

页面的配置是通过js完成的。

controls：是否显示左下角的控制键，默认为true

progress：是否显示进度条，默认为true

center：是否在居中显示，默认为true

transition：为页之间的切换动画，默认为slide，即水平滑动，这里我们改成zoom缩放看看效果

保存，用浏览器打开，效果如下

5、小结

Be creative, build your own.