HTML 展示框架
由 Hakim El Hattab 和 贡献者 共同创建
你好
reveal.js 让你使用 HTML 创建精美的互动式幻灯片。该演示将展示它可以做什么。
纵向幻灯片
幻灯片可以相互嵌套。
使用 Space 键浏览所有幻灯片。
地下 1 层
嵌套幻灯片非常适合在高级水平横向幻灯片下方添加其他细节。
地下 2 层
到此为止，现在是时候返回了。
幻灯片
不是程序员？没问题。有一个功能齐全的视觉编辑器可以编写这些内容，请在 https://slides.com 尝试一下。
漂亮的代码
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
...
);
}
代码语法高亮由 highlight.js 提供。
更漂亮的动画
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
function SecondExample() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
视点
按 ESC 进入幻灯片概览。
按住 alt 键（Linux 中为 ctrl），然后单击任何元素，即可使用 zoom.js 缩放该元素。再次单击即可缩小。
（注意：在 Linux 中使用 ctrl + 单击。）
自动动画
使用 自动动画 在幻灯片中自动为匹配的元素设置动画。
自动动画
自动动画
触控优化
演示文稿在触控设备（如移动电话和平板电脑）上看起来很棒。只需轻扫即可翻阅你的幻灯片。
添加 r-fit-text 类以自动调整文本大小
合适文字大小
片段
点击下一个箭头...
... 浏览 ...
... 一个 分段 幻灯片。
分段样式
分段有多种类型，例如
增长
收缩
淡出
淡入右方， 淡入上方， 淡入下方， 淡入左方
淡入然后淡出
淡入然后半淡出
突出显示 红色 蓝色 绿色
转换样式
幻灯片背景
在一张幻灯片上设置 data-background="#dddddd" 以更改背景颜色。支持所有 CSS 颜色格式。
图像背景
<section data-background="image.png">平铺背景
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">视频背景
<section data-background-video="video.mp4,video.webm">... 和 GIF！
背景转换
通过背景转换选项，可以实现不同的背景转换。此选项称为“缩放”。
Reveal.configure({ backgroundTransition: 'zoom' })背景转换
你可以按幻灯片覆盖背景转换。
<section data-background-transition="zoom">Iframe 背景
由于 reveal.js 在网上运行，因此你可以轻松地嵌入其他网络内容。尝试与背景中的页面互动。
绝妙列表
- 这里无序
- 这里也是
- 这里也是
- 这里也是
奇妙有序列表
- 第一个比……小
- 第二个比……小
- 第三个！
制表符表格
| 项目 | 值 | 数量 |
|---|---|---|
| 苹果 | $1 | 7 |
| 柠檬水 | $2 | 18 |
| 面包 | $3 | 2 |
精明引言
这些家伙有两种形式，内联：标准的好处在于它们有很多选择
和块
“多年来，一直有一个理论认为，数百万人无意间使用数百个打字机打字，可以打印出莎士比亚所有的作品。互联网证明了该理论是错误的。”
银河系连接
可以在幻灯片内部进行链接，像这样。
演讲者视图
有一个 演讲者视图。它包括计时器、即将显示幻灯片的预览以及演讲者备注。
按 S 键试用。
导出为 PDF
演示文稿可以 导出为 PDF，这是一个示例
全局状态
在幻灯片上设置 data-state="something"，当幻灯片打开时，会将 "something" 添加为文档元素的类。这让你可以应用更广泛的样式更改，如切换页面背景。
状态事件
此外，还可以通过绑定 data-state 名称，逐个幻灯片触发自定义事件。
Reveal.on( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
停一下
按键盘上的 B 或 . 来暂停演示文稿。当你上台并希望将分散注意力的幻灯片从屏幕上移开时，这很有帮助。