Reveal.js HTML5炫酷幻灯片

用reveal.js和HTML5制作幻灯片,炫到没朋友!

1、首先下载reveal.js,然后引入

Reveal.js HTML5炫酷幻灯片_第1张图片

2、在index.html里面引入css和js,我写的简单demo如下:




	
	
	
	
	
	
  


	

Single Horizontal Slide

Vertical Slide 1

Vertical Slide 2

Vertical Slide 3

Vertical Slide dsd
Happy New Year!
Happy New Year!5656
Happy New Year!5646
Happy New Year!46456

Vertical Slide 1

Vertical Slide 2
Vertical Slide 3
Vertical Slide 4
3、一些注意:

(1)data-background 属性来在幻灯片之外添加整个页面的背景。支持四种类型的背景: color, image, video 和 iframe
(2)点击 "Esc" 或 "o" 键来切换概览模式

(3)键盘上点击 »F« 按键即可进入全屏模式。点击 »ESC« 按键退出全屏模式

(4)嵌入的 HTML5

(5)局幻灯片切换效果是通过 transition 配置值来设定的。你可以通过指定

元素的 data-transition 属性来重写全局配置。支持效果: none/fade/slide/convex/concave/zoom






你可能感兴趣的:(html5,reveal.js)