让网页演示变得优雅
教案演示
Reveal.js 是一个基于 HTML/CSS/JavaScript 的开源演示框架
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
<link rel="stylesheet"
href=".../theme/white.css">
<script src=".../reveal.js"></script>
<script>
Reveal.initialize();
</script>npm install reveal.js
import Reveal from 'reveal.js';
import 'reveal.js/dist/reveal.css';
const deck = new Reveal({
hash: true,
transition: 'slide'
});
deck.initialize();<div class="reveal">
<div class="slides">
<section>
<h1>第一页</h1>
<p>内容...</p>
</section>
<section>
<h2>第二页</h2>
</section>
</div>
</div><section> 代表一张幻灯片--- 分隔页面-- 创建垂直幻灯片| 主题 | 说明 | 适用场景 |
|---|---|---|
black | 黑色背景 | 技术演示 |
white | 白色背景 | 文档教程 |
night | 深色主题 | 暗光环境 |
beige | 米色背景 | 温馨演讲 |
league | 蓝灰配色 | 商务演示 |
<link href=".../theme/white.css" rel="stylesheet">none 无fade 淡入淡出slide 滑动convex 凸起concave 凹陷zoom 缩放Reveal.initialize({
transition: 'slide',
transitionSpeed: 'default'
});<section data-transition="zoom">
Reveal.js 内置 highlight.js，支持 100+ 语言
<section>
<pre><code class="language-python">
def hello():
print("Hello World!")
</code></pre>
</section>让内容逐个出现，增强演示节奏
<li class="fragment">第一步</li>
<li class="fragment">第二步</li>
<li class="fragment">第三步</li>fade-out 渐出fade-up/down/left/rightgrow 放大shrink 缩小highlight-red 高亮data-background-color="#ff0000"data-background-image="bg.jpg"data-background-video="video.mp4"data-background-gradient="linear-gradient(...)"S 打开演讲者视图ESC 全览模式F 全屏B 暂停<section>
<h2>标题</h2>
<aside class="notes">
观众看不到的备注...
</aside>
</section>Reveal.initialize({
hash: true, // URL 哈希跟踪
controls: true, // 导航箭头
progress: true, // 进度条
center: true, // 居中显示
width: 960, // 宽度
height: 540, // 高度
slideNumber: true, // 页码
transition: 'slide', // 过渡效果
keyboard: true, // 键盘控制
overview: true, // ESC 全览
});<iframe
src="slides.html"
width="100%"
height="500"
frameborder="0"
allowfullscreen>
</iframe>Reveal.initialize({
embedded: true,
hash: false
});?print-pdf 后打印Reveal.configure({
autoSlide: 5000,
autoSlideStoppable: false
});Reveal.on('slidechanged', e => {
console.log(e.indexh);
});
Reveal.on('fragmentshown', e => {
console.log('fragment!');
});
Reveal.js = HTML 演示框架
优势：版本控制友好 · 易于分享 · 支持 Markdown
适用：技术分享 · 文档教程 · 在线课程