幻灯片版式

1 / 7 ← → 或滚动

光是怎么走的。

演示文稿：画面不动，每次滚动是下一张幻灯片。

一束激光。

每一个红点，都从一束光开始。

滤色片只留下红光。

部件改变颜色，光也跟着变。

镜子让它转弯。

红光向下，找到了目标。

光会叠加。

红光遇上绿光，目标变成黄色。

四个房间。

棋盘缩小，变成四个房间的红点路线。

开始追踪。

example.com/red-dot

标记 
<main class="f-deck" data-f-deck>
  <div class="f-deck__stage">
    <div class="f-deck__caps"></div>
    <div class="f-deck__frame">
      <div class="f-deck__board" aria-hidden="true">
        <i class="f-deck__piece f-deck__tile" data-f-piece="laser"></i>
        <i class="f-deck__piece f-deck__beam" data-f-piece="b1"></i>
      </div>
    </div>
    <div class="f-deck__bar">
      <button type="button" data-f-deck-prev aria-label="Previous slide">↑</button>
      <span class="f-deck__count">1 / 2</span>
      <span class="f-deck__progress"></span>
      <button type="button" data-f-deck-next aria-label="Next slide">↓</button>
    </div>
  </div>
  <section class="f-deck__slide" data-f-slide='{"laser": {"at": [50, 50]}}'>
    <h2>How light moves.</h2>
  </section>
  <section class="f-deck__slide"
    data-f-slide='{"laser": {"at": [20, 50]}, "b1": {"beam": [20, 50, 60]}}'>
    <h2>In straight lines.</h2>
  </section>
</main>
<!-- The data-f-slide format is on the Overview page, under Behavior. -->