跳至主要內容

幻灯片功能使用方法

leonhardt...大约 2 分钟Game

幻灯片功能使用方法

@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