使用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.

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180606G0TRCS00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券