reveal.js是一个能够帮助我们很轻易地使用 HTML 创建一个漂亮的演示文稿的插件
git: https://github.com/hakimel/reveal.js/releases
我们需要的东西就在js文件夹和plugin文件夹和css文件夹里面
然后新建一个工程,把我们需要的东西挪过去
在头文件引入这些css文件
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
然后开始写body
<div class="reveal">
<div class="slides">
我们的所有内容都要写在这里
</div>
</div>
一个<section>标签就是一张ppt
<section>里面嵌套<section>就可以上下翻页
比如
<section>
<section>
第一页
</section>
<section>
第二页
</section>
</section>
reveal自带的动画有grow,shrink,fade-out,fade-right,fade-up,fade-down,fade-left,fade-in-then-out,fade-in-then-semi-out
// 就是给你需要添加动画的文字加上对应的ckass
// 并且fragment是必须加的,你也可以去自己自定义动画
grow
shrink
fade-out
fade-right,
up,
down,
left
fade-in-then-out
fade-in-then-semi-out
Highlight red blue green
就是这么简单,把动画名添加到链接上,reveal.js会帮你做切换
Black(default) -
White
League
Sky
Beige
Simple
Serif
Blood
Night
Moon
Solarized
原理就是改变head中 id='theme’的那个css链接
# 一级标题
## 二级标题
Markdown支持需要加载Markdown.js插件并且在section标签中加入data-markdown属性,但是好像markdown的功能支持的不是很好的亚子
代码高亮需要加载插件highlight.js
在这里写代码就能高亮, 当然记住要包在section里
可以单独给每个section设置背景,包括背景颜色,背景图片,甚至可以放视频
这是背景 颜色
这是背景图片
这是背景视频,视频支持.mp4.webm.gif格式
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
dependencies: [
{ src: 'plugin/markdown/marked.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
{ src: 'plugin/markdown/markdown.js', condition: function () { return !!document.querySelector('[data-markdown]'); } },
{ src: 'plugin/highlight/highlight.js', async: true },
{ src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
字段 | 类型 | 作用 | 默认 |
---|---|---|---|
controls | boolean | 显示箭头 | true |
controlsTutorial | boolean | 箭头更友好的动画 | true |
controlsLayout | string | 箭头的位置 | ‘bottom-right’ |
controlsBackArrows | string | 后退箭头的样式 | ‘fade’ |
progress | boolean | 进度条 | true |
slideNumber | boolean | 在右下角显示页数 | false |
keyboard | boolean | 是否键盘控制 | true |
disableLayout | boolean | 取消reveal.js的默认布局 | false |
center | boolean | 上下左右居中 | true |
fragments | boolean | 是否逐帧播放动画 | true |
transition | string | 默认的过场动画 | slide |
transitionSpeed | string | 过场动画速度 | default 可选default/fast/slow |
backgroundTransition | string | 背景切换动画 | fade可选none/fade/slide/convex/concave/zoom |