要了解一個新知識我們可以從三個方面入手：是什么，有什么用，怎么用。下面我們就從這三個方面進行講解Reveal.js噢
Reveal.js是什么
它是一個專門用來做 HTML 演示文稿的框架，通俗的講它是網頁版的ppt，使用瀏覽器進行播放。
Reveal.js有什么用
使用它可以用網頁做出酷炫的展示內容，不會編程看完后也可以做出炫酷效果哦。。。
優勢如下：
1.它提供了一套ppt的效果展示，我們只需要關注內容的編寫
2.有瀏覽器就可以展示，不用依賴ppt軟件(推薦使用比較新的瀏覽器哦)
3.編寫簡單，可以直接用代碼編寫特效，不會代碼的直接復制粘貼又是一張新的ppt頁面了
。。。。。。
Reveal.js怎么用
下面就來到了本章的重點，所謂我看都沒看到效果，你就pa一大堆看不懂的給我，我只想說“真系摞命”，pa頁面關閉。
那么為讓大家先體驗一下，下面就給大家來個demo初體驗試試
demo初體驗
(將下面代碼復制粘貼到本地文本文件，后綴改為html用瀏覽器打開即可運行)
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Reveal.js教程</title>
<link
href="https://cdn.bootcss.com/reveal.js/3.8.0/css/reveal.min.css"
rel="stylesheet"
/>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/reveal.js/3.8.0/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- 內容 start -->
<!-- 頁 -->
<section>
<h1>
第一頁
</h1>
<p>這是第一頁的內容，按鍵盤的 右箭頭(→) 可以切換第二頁</p>
</section>
<!-- 頁 -->
<section>
<h1> 第二頁 </h1> <p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p> </section> <!-- 內容 end --> </div> </div> <script src="https://cdn.bootcss.com/reveal.js/3.8.0/js/reveal.js"></script> <script> Reveal.initialize({ controls: true, progress: true, center: true, transition: "zoom" // none/fade/slide/convex/concave/zoom }); </script> </body> </html>
試了上面的demo是不是很簡單呢，下面我們就正式進入Reveal.js的學習啦
首先我們可以從下面的途徑獲取到Reveal.js的框架
1.github：從 https://github.com/hakimel/reveal.js/releases 下載 reveal.js 的最新版本
2.從bootcdn直接引用：https://www.bootcdn.cn/reveal.js/
3.用npm 下載 安裝 (這個方法對於初學者比較麻煩在這里就不講了)
github下載
直接點擊上面的連接，跳轉網站后，向下滾動，直到看到有2個壓縮的文件，點擊即可下載。
下載后的目錄結構如下圖，；里面有index.html和demo.html文件，這是該框架的基本效果，看得懂的可以研究下。
從bootcdn直接引用
玩過編程的應該都知道網上現在有很多靜態資源庫，直接引用即可，不用下載到本地，只要有網絡，將做的文件發給任何人都可以直接打開查看，無需再關注所引用的文件是否路徑正確，本教程也是使用該方法引入的所需插件。
引入開發所需的插件，並加以必要注釋
上面的demo只是引入了基本的兩個插件，而我們實際使用中還需要更多的插件幫助我們實現效果，具體需要引入的插件看下面代碼
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Reveal.js教程</title>
<!-- 初始化樣式 -->
<link
href="https://cdn.bootcss.com/reveal.js/3.8.0/css/reset.min.css"
rel="stylesheet"
/>
<!-- Reveal.js主要樣式，必須 -->
<link
href="https://cdn.bootcss.com/reveal.js/3.8.0/css/reveal.min.css"
rel="stylesheet"
/>
<!-- 黑色主題樣式：最明顯背景黑了 -->
<link
href="https://cdn.bootcss.com/reveal.js/3.7.0/css/theme/black.min.css"
rel="stylesheet"
/>
<!-- 如果要展示代碼高亮效果，引入這個樣式 -->
<link
href="https://cdn.bootcss.com/reveal.js/3.8.0/lib/css/monokai.min.css"
rel="stylesheet"
/>
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/reveal.js/3.8.0/lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- 每張 ppt頁面 必須寫在<div class="reveal"><div class="slides">這里寫頁面 </div></div> 里面 -->
<div class="reveal">
<div class="slides">
<!-- 內容 start -->
<!-- 頁 -->
<section>
<h1>
第一頁
</h1>
<p>這是第一頁的內容，按鍵盤的 右箭頭(→) 可以切換第二頁</p>
</section>
<!-- 頁 -->
<section>
<h1> 第二頁 </h1> <p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p> </section> <!-- 內容 end --> </div> </div> <!-- Reveal.js主要js效果，必須 --> <script src="https://cdn.bootcss.com/reveal.js/3.8.0/js/reveal.js"></script> <script> // Reveal.initialize({}) 初始化插件，里面每個鍵值對后面要加英文逗號(,)分隔 Reveal.initialize({ controls: true, progress: true, center: true, hash: true, slideNumber: "c/t", //右下角顯示頁數 // 頁面間的切換效果，在這里設置全局的切換效果； // 如果要單獨更改一個頁面的切換效果，可以在該頁面的 <section> 標簽添加(data-transition="值")屬性，值可以選擇下面切換效果的參數 // 如：<section data-transition="zoom"> transition: "convex", // 頁面間的切換效果：none/fade/slide/convex/concave/zoom dependencies: [ { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/markdown/marked.js", condition: function() { return !!document.querySelector("[data-markdown]"); } }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/markdown/markdown.min.js", condition: function() { return !!document.querySelector("[data-markdown]"); } }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/highlight/highlight.min.js", async: true }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/search/search.min.js", async: true }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/zoom-js/zoom.min.js", async: true }, { src: "https://cdn.bootcss.com/reveal.js/3.8.0/plugin/notes/notes.min.js", async: true } ] }); </script> </body> </html>
Reveal.js還為我們提供了多個主題可供選擇，具體可以看下圖
准備工作已就緒，下面讓我們來正式開始特效學習
頁面的上下切換(垂直方式顯示)：需要 <section> 標簽里面嵌套多個 <section> 標簽
<!-- 內容 start -->
<!-- 頁 -->
<section>
<!-- section中的section -->
<section>
<h1>
第一頁第一節
</h1>
<p>按鍵盤的 下箭頭(↓) 可以切換 第一頁第二節</p>
</section>
<!-- 節與節的section平級 -->
<section>
<h1> 第一頁第二節 </h1> <p>按鍵盤的 上箭頭(↑) 可以切換 第一頁第一節</p> </section> </section> <!-- 內容 end -->
頁面的左右切換(水平方式顯示):需要 <section> 標簽平級不嵌套
<!-- 內容 start -->
<!-- 頁 -->
<section>
<h1>
第一頁
</h1>
<p>這是第一頁的內容，按鍵盤的 右箭頭(→) 可以切換第二頁</p>
</section>
<!-- 頁 -->
<section>
<h1> 第二頁 </h1> <p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p> </section> <!-- 內容 end -->
常用於展示的標簽
-
h1~h6 標題標簽，文字會加粗
-
p 標簽：文字正常顯示
-
img 標簽：這個標簽可以加載圖片
-
audio 標簽：可以加載音樂播放
-
video 標簽：可以加載視頻播放
<!-- 內容 start --> <!-- 頁 --> <section > <h1> 第一頁,這是 h1 標簽</h1> <h2>這是 h2 標簽</h2> <h6>這是 h6 標簽</h6> <p>這是 p 標簽，按鍵盤的 右箭頭(→) 可以切換第二頁</p> <img src="./背景.jpg" alt="這是圖片標簽，圖片不能顯示所以裂了"> </section> <!-- 頁 --> <section > <h1>第二頁</h1> <p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p> <audio src="./你的答案.mp3" controls>加載音樂</audio> <video src="./阿冗 - 你的答案.mkv" controls>加載視頻</video> </section> <!-- 內容 end -->
展示的效果
所用資源的目錄結構
單獨給頁面添加過渡效果
下面是讓 第二頁 在過渡到 第三張 時有 放大 的過渡效果，第一頁 過渡到 第二頁 不設置，采用的是全局設置的過渡效果
過渡效果默認值有：none/fade/slide/convex/concave/zoom
過渡效果默認值：none不用切換效果/fade漸隱/slide平移出屏幕/convex立體向后隱藏/concave立體向前隱藏/zoom放大
<!-- 內容 start -->
<!-- 頁 -->
<section >
<h1>第一頁</h1>
<h3>到第二頁是全局設置的默認過渡效果</h3>
<p>按鍵盤的 右箭頭(→) 可以切換第二頁</p>
</section>
<!-- 頁 -->
<!-- 頁面間的切換效果：none/fade/slide/convex/concave/zoom -->
<section data-transition="zoom">
<h1>第二頁</h1>
<p>按鍵盤的 左箭頭(←) 可以切換第二頁</p>
<h2>到第三頁有 放大 的過渡效果</h2>
<p>按鍵盤的 右箭頭(→) 可以切換第三頁</p>
</section>
<!-- 頁 -->
<section>
<h1>第三頁</h1>
<p>按鍵盤的 左箭頭(←) 可以切換第二頁</p>
</section>
<!-- 內容 end -->
設置頁面背景
可以設置頁面背景的顏色/圖片/視頻/過渡效果
data-background-video="./阿冗 - 你的答案.mkv" ：設置頁面視頻
data-background="red" ： 設置頁面背景顏色，值可以是16進制顏色，也可以是英文顏色
data-background-transition="zoom" ：設置頁面背景過渡效果，這個只是背景的過渡，文字還是會用全局的過渡效果的
注意：如果不用它的自定義屬性設置背景顏色，而是 自己用樣式設置背景顏色(如第三頁效果)，那么背景顏色是不會全屏顯示的，只會在文字撐開的盒子里顯示
<!-- 內容 start --> <!-- 頁 --> <section data-background-video="./阿冗 - 你的答案.mkv"> <h1>第一頁</h1> <h3>設置了頁面的 視頻</h3> <p>按鍵盤的 右箭頭(→) 可以切換第二頁</p> </section> <!-- 頁 --> <!-- 頁面間的切換效果：none/fade/slide/convex/concave/zoom --> <section data-background="red" data-background-transition="zoom" > <h1>第二頁</h1> <h3>設置了頁面的 背景顏色和背景過渡效果</h3> <p>按鍵盤的 左箭頭(←) 可以切換第一頁</p> <p>按鍵盤的 右箭頭(→) 可以切換第三頁</p> </section> <!-- 頁 --> <!-- 自定義的背景樣式 style="" --> <section style=""> <h1>第三頁</h1> <p>按鍵盤的 左箭頭(←) 可以切換第二頁</p> </section> <!-- 內容 end -->
文字相關設置
文字片段：一段一段出現的效果，給需要的標簽添加 class="fragment" 屬性
片段出現的動畫：必須要有片段效果，然后添加 fade 的類，fade-* 跟方位名稱，控制出現的動畫方向
動畫出現的順序：必須要有片段效果 ， 然后添加屬性 data-fragment-index="3" ，其中 3 為出現的順序值
文字高亮顯示：添加 highlight-blue 類，blue可以更改為red/green；
注：也可以自定義文字顏色，在標簽中加如下代碼即可 ： style="color: pink;"
<!-- 內容 start --> <!-- 頁 --> <section> <h1>第一頁</h1> <p>按鍵盤 下箭頭(↓) 或 右箭頭(→) 顯示本頁隱藏的文字</p> <!-- fragment：單獨這個樣式，文字會漸漸出現，這是文字片段效果 --> <p class="fragment">這是隱藏的文字，漸漸出現，還有隱藏</p> <!-- fade-down：從上到下，fade-up：從下到上，fade-left：從右到左，fade-right：從左到右 --> <p class="fragment fade-up">這是隱藏的文字，會從下到上出現</p> </section> <!-- 頁 --> <section > <h1>第二頁</h1> <!-- fade-in-then-out : 第一次按鍵盤會出現，第二次按鍵盤又隱藏了，並且進行下一個效果 --> <p class="fragment fade-in-then-out">出現后，再按鍵盤 下箭頭(↓) 就隱藏，並且進行下一個效果</p> <!-- fade-in-then-semi-out ： 第一次出現，再按鍵盤顏色就變淺 --> <p class="fragment fade-in-then-semi-out">出現后，再按鍵盤 下箭頭(↓) 就顏色變淺</p> <!-- highlight-blue ： 高亮變藍色，blue可以換成red，green --> <p class="fragment highlight-blue">按鍵盤的 下箭頭(↓) 下面字體的顏色高亮邊藍色</p> <p class="fragment highlight-green">按鍵盤的 左箭頭(←) 可以切換第二頁</p> <p>按鍵盤的 右箭頭(→) 可以切換第三頁</p> </section> <!-- 頁 --> <section > <h1>第三頁</h1> <!-- data-fragment-index="10" : 設置片段出現的順序 --> <p >按鍵盤 下箭頭(↓) 或 右箭頭(→) 顯示本頁隱藏的文字</p> <p class="fragment" data-fragment-index="3" >排第一，第三順序出現</p> <p class="fragment" data-fragment-index="1" >排第二，第一順序出現</p> <p class="fragment" data-fragment-index="2" >排第三，第二順序出現</p> <!-- style="color: pink;" ： 自定義設置文字顏色 --> <p style="color: pink;" >按鍵盤的 左箭頭(←) 可以切換第二頁</p> </section> <!-- 內容 end -->
直接使用Markdown語法
要給需要的頁面的 <section> 標簽添加 data-markdown 屬性，並且里面寫 script 標簽
注：
-
可以使用 Typora軟件寫好 Markdown的文檔，再將其復制到該需要的頁面中，這樣就不會出現語法錯誤
-
也可以直接引入外部的markdown文件
<!-- 內容 start -->
<!-- 頁 -->
<section data-markdown>
<script type="text/template">
# 這是h1標簽
- 無序列表1 - 無序列表2 ```html <p> 這是 p 標簽的代碼段 </p> ``` </script> </section> <!-- 內容 end -->
附：快捷鍵
上下左右鍵 ： 頁面間的切換
F鍵 ：全屏 (按下 ESC鍵 退出全屏)
f11鍵 ：全屏 (這個全屏需要再次按下 f11 才可以退出全屏)
o鍵 ：預覽所有頁面 (這時按 上下左右鍵 可以切換當前的選中頁面 ，再次按 o鍵 顯示當前選中的頁面)
到此基本的操作已經講完了，可以適用大部分ppt演示的需求，更加深入的如需要，可以自行到官網中研究即可
現附加完整效果的代碼
<!-- 內容 start -->
<!-- 頁 -->
<section>
<!-- section中的section -->
<section>
<h1>
第一頁第一節
</h1>
<p>按鍵盤的 下箭頭(↓) 可以切換 第一頁第二節</p>
</section>
<!-- 節與節的section平級 -->
<section data-transition="zoom">
<h1> 第一頁第二節 </h1> <p>按鍵盤的 上箭頭(↑) 可以切換 第一頁第一節</p> </section> </section> <!-- 頁 --> <section data-background="red" data-background-transition="zoom"> <h1>第一頁,這是 h1 標簽</h1> <h2 class="fragment fade-in-then-out">這是 h2 標簽</h2> <h6 class="fragment fade-in-then-semi-out">這是 h6 標簽</h6> <p>這是 p 標簽，按鍵盤的 右箭頭(→) 可以切換第二頁</p> <img src="./背景.jpg" alt="這是圖片標簽，圖片不能顯示所以裂了" /> </section> <!-- 頁 --> <section> <h1 class="fragment highlight-blue">第二頁</h1> <p>這是第二頁的內容，按鍵盤的 左箭頭(←) 可以切換第一頁</p> <audio src="./你的答案.mp3" controls>加載音樂</audio> <video src="./阿冗 - 你的答案.mkv" controls>加載視頻</video> </section> <!-- 頁 --> <section> <h1>第三頁</h1> <!-- data-fragment-index="10" : 設置片段出現的順序 --> <p>按鍵盤 下箭頭(↓) 或 右箭頭(→) 顯示本頁隱藏的文字</p> <p class="fragment" data-fragment-index="3">排第一，第三順序出現</p> <p class="fragment" data-fragment-index="1">排第二，第一順序出現</p> <p class="fragment" data-fragment-index="2">排第三，第二順序出現</p> <!-- style="color: pink;" ： 自定義設置文字顏色 --> <p style="color: pink;">按鍵盤的 左箭頭(←) 可以切換第二頁</p> </section> <!-- 頁 --> <section data-markdown> <script type="text/template"> # 這是h1標簽 - 無序列表1 - 無序列表2 ```html <p> 這是 p 標簽的代碼段 </p> ``` </script> </section> <!-- 內容 end -->