幻灯片功能使用方法
...大约 2 分钟
幻灯片功能使用方法
@slidestart
<!-- slide1 -->
<!-- .slide: data-background="#ff0000" -->
## FFMPEG ENCODING AND EDITING COURSE <!-- .h2: class="r-fit-text" -->
Werner Robitza <!-- .element: class="r-fit-text" -->
June 04, 2018
--
## slide 1-2
ddflaskfdjlaskfjal
---
<!-- slide2 -->
---
<!-- slide3 -->
@slideend
- 起始
@slidestart
,@slideend
。 ---
水平分割幻灯片(向右导航),--
竖直分割幻灯片(向下导航)。- Markdown语法中向元素注入属性
<!-- .slide: data-background="#ff0000" -->
向代表一张幻灯片的section元素注入属性,可以设置背景颜色,背景图片等。<!-- .h2: class="r-fit-text" -->
向代表一个h2元素注入属性<!-- .element: class="r-fit-text" -->
在前一个 HTML 元素上添加属性
Reveal.js支持的功能
背景属性
data-background-color="aquamarine"
data-background-color="rgb(70, 70, 255)"
data-background-color="rgba(70, 70, 255, 200)"
data-background-color="hsl(70, 70, 255)"
- 渐变:
data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"
- 背景图片:
data-background-image=/assets/dawn.jpg
语法高亮
- 通常的markdown写法
- ````js [1-2|3|4]` 右键导航依次高亮表示1-2行,3行,4行。
- ````js [712: 1-2|3|4]`。 行号起始数字设为712。
数学公式
用<section></section>
包裹并且和---
之间空一行。
<!-- 数学公式示例 -->
---
<section>
<h2>math</h2>
\[\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned} \]
</section>
---
Fragment-简单动画 class="fragment fade-out"
- 支持的效果
- class="fragment" 实际默认为fade-in效果。
- fade-out Start visible, fade out
- fade-up Slide up while fading in
- fade-down Slide down while fading in
- fade-left Slide left while fading in
- fade-right Slide right while fading in
- fade-in-then-out Fades in, then out on the next step
- current-visible Fades in, then out on the next step
- fade-in-then-semi-out Fades in, then to 50% on the next step
- grow Scale up
- semi-fade-out Fade out to 50%
- shrink Scale down
- strike Strike through
- highlight-red Turn text red
- highlight-green Turn text green
- highlight-blue Turn text blue
- highlight-current-red Turn text red, then back to original on next step
- highlight-current-green Turn text green, then back to original on next step
- highlight-current-blue Turn text blue, then back to original on next step
- 嵌套:使用span标签嵌套。从外层效果开始执行。
<span class="fragment fade-in"><span class="fragment highlight-red"><span class="fragment fade-out">Fade in > Turn red > Fade out</span></span></span>
淡入->变红->淡出
- 控制效果顺序:
data-fragment-index="1"
跳转
<a href="#/0">Back to the first</a>
#/0
水平第一页#/0/1
水平第一页,垂直第二页#/section-id
也可以用section的id。
布局
文本左对齐
<!-- .slide: style="text-align: left;" -->
堆叠
@slidestart
## 堆叠示例
<div class="r-stack">
<img class="fragment" src="https://picsum.photos/450/300" width="450" height="300">
<img class="fragment" src="https://picsum.photos/300/450" width="300" height="450">
<img class="fragment" src="https://picsum.photos/400/400" width="400" height="400">
</div>
@slideend
文本拉伸和图片拉伸
@slidestart
<h2 class="r-fit-text">Stretch Example</h2>
<img class="r-stretch" src="https://picsum.photos/400/400">
@slideend