Reveal.js HTML5炫酷幻灯片

ゝ一纸荒年。 2022-07-13 03:51 217阅读 0赞

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

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

![Center][]

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">   </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> <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

[Center]: /images/20220713/5c21cd35604e4276822826624ae177b4.png