控制出现的动画方向 动画出现的顺序：必须要有片段效果
标签：
Revealjs网页版PPT让你复制粘贴另类装逼，简洁优雅又低调，不懂编程也看过来要了解一个新常识我们可以从三个方面入手：是什么，有什么用，怎么用。下面我们就从这三个方面进行讲解Reveal.js噢
Reveal.js是什么它是一个专门用来做 HTML 演示文稿的框架，通俗的讲它是网页版的ppt，使用浏览器进行播放。
Reveal.js有什么用使用它可以用网页做出酷炫的展示内容，不会编程看完后也可以做出炫酷效果哦。。。
优势如下：1.它供给了一套ppt的效果展示，我们只需要存眷内容的编写
2.有浏览器就可以展示，不用依赖ppt软件(保举使用对照新的浏览器哦)
3.编写简单，可以直接用代码编写特效，不会代码的直接复制粘贴又是一张新的ppt页面了
。。。。。。
Reveal.js怎么用下面就来到了本章的重点，所谓我看都没看到效果，你就pa一大堆看不懂的给我，我只想说“真系摞命”，pa页面封锁。
那么为让大家先体验一下，下面就给大家来个demo初体验尝尝
demo初体验 (将下面代码复制粘贴到本地文本文件，后缀改为html用浏览器打开即可运行)<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Reveal.js教程</title> <link href="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.8.0/css/reveal.min.css" /> <!--[if lt IE 9]> <script src="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.8.0/lib/js/html5shiv.js"></script> <![endif]--> </head> <body> <div> <div> <!-- 内容 start --> <!-- 页 --> <section> <h1> 第一页 </h1> <p>这是第一页的内容，按键盘的 右箭头(→) 可以切换第二页</p> </section> <!-- 页 --> <section> <h1> 第二页 </h1> <p>这是第二页的内容，按键盘的 左箭头(←) 可以切换第一页</p> </section> <!-- 内容 end --> </div> </div> ? <script src="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.8.0/js/reveal.js"></script> ? <script> Reveal.initialize({ controls: true, progress: true, center: true, ? transition: "zoom" // none/fade/slide/convex/concave/zoom }); </script> </body> </html>
试了上面的demo是不是很简单呢，下面我们就正式进入Reveal.js的学习啦 首先我们可以从下面的途径获取到Reveal.js的框架1.github：从 https://github.com/hakimel/reveal.js/releases 下载 reveal.js 的最新版本
2.从bootcdn直接引用：https://www.bootcdn.cn/reveal.js/
3.用npm 下载 安置 (这个要领对付初学者对照麻烦在这里就不讲了)
github下载 直接点击上面的连接，跳转网站后，向下滚动，直到看到有2个压缩的文件，点击即可下载。
玩过编程的应该都知道网上此刻有很多静态资源库，直接引用即可，不用下载到本地，只要有网络，将做的文件发给任何人都可以直接打开检察，无需再存眷所引用的文件是否路径正确，本教程也是使用该要领引入的所需插件。
上面的demo只是引入了根基的两个插件，而我们实际使用中还需要更多的插件辅佐我们实现效果，具体需要引入的插件看下面代码
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8" /> <meta content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Reveal.js教程</title> <!-- 初始化样式 --> <link href="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.8.0/css/reset.min.css" /> <!-- Reveal.js主要样式，必需 --> <link href="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.8.0/css/reveal.min.css" /> <!-- 黑色主题样式：最明显配景黑了 --> <link href="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.7.0/css/theme/black.min.css" /> <!-- 如果要展示代码高亮效果，引入这个样式 --> <link href="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.8.0/lib/css/monokai.min.css" /> <!--[if lt IE 9]> <script src="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.8.0/lib/js/html5shiv.js"></script> <![endif]--> </head> <body> <!-- 每张 ppt页面 必需写在<div><div>这里写页面 </div></div> 里面 --> <div> <div> <!-- 内容 start --> <!-- 页 --> <section> <h1> 第一页 </h1> <p>这是第一页的内容，按键盘的 右箭头(→) 可以切换第二页</p> </section> <!-- 页 --> <section> <h1> 第二页 </h1> <p>这是第二页的内容，按键盘的 左箭头(←) 可以切换第一页</p> </section> <!-- 内容 end --> </div> </div> ? <!-- Reveal.js主要js效果，必需 --> <script src="http://www.mamicode.com/https:/cdn.bootcss.com/reveal.js/3.8.0/js/reveal.js"></script> ? <script> // Reveal.initialize({}) 初始化插件，里面每个键值对后面要加英文逗号(,)分隔断绝分手 Reveal.initialize({ controls: true, progress: true, center: true, hash: true, slideNumber: "c/t", //右下角显示页数 ? // 页面间的切换效果，在这里设置全局的切换效果； // 如果要单独变动一个页面的切换效果，可以在该页面的 <section> 标签添加(data-transition="值")属性，值可以选择下面切换效果的参数 // 如：<section data-transition="zoom"> transition: "convex", // 页面间的切换效果：none/fade/slide/convex/concave/zoom ? dependencies: [ { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/markdown/marked.js", condition: function() { return !!document.querySelector("[data-markdown]"); } }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/markdown/markdown.min.js", condition: function() { return !!document.querySelector("[data-markdown]"); } }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/highlight/highlight.min.js", async: true }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/search/search.min.js", async: true }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/zoom-js/zoom.min.js", async: true }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/notes/notes.min.js", async: true } ] }); </script> </body> </html>
Reveal.js还为我们供给了多个主题可供选择，具体可以看下图温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32152.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")