幻灯片功能使用方法

@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

1. 起始@slidestart, @slideend。
2. ---水平分割幻灯片(向右导航)，--竖直分割幻灯片(向下导航)。
3. 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} &amp; = \sigma(y-x) \\
  \dot{y} &amp; = \rho x - y - xz \\
  \dot{z} &amp; = -\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