Revealjs網頁版PPT讓你複製粘貼另類裝逼，簡潔優雅又低調，不懂編程也看過來
要了解一個新知識咱們能夠從三個方面入手：是什麼，有什麼用，怎麼用。下面咱們就從這三個方面進行講解Reveal.js噢css
Reveal.js是什麼
它是一個專門用來作 HTML 演示文稿的框架，通俗的講它是網頁版的ppt，使用瀏覽器進行播放。html
Reveal.js有什麼用
使用它能夠用網頁作出酷炫的展現內容，不會編程看完後也能夠作出炫酷效果哦。。。html5
優點以下：
1.它提供了一套ppt的效果展現，咱們只須要關注內容的編寫git
2.有瀏覽器就能夠展現，不用依賴ppt軟件(推薦使用比較新的瀏覽器哦)github
3.編寫簡單，能夠直接用代碼編寫特效，不會代碼的直接複製粘貼又是一張新的ppt頁面了npm
。。。。。。編程
Reveal.js怎麼用
下面就來到了本章的重點，所謂我看都沒看到效果，你就pa一大堆看不懂的給我，我只想說「真系摞命」，pa頁面關閉。瀏覽器
那麼爲讓你們先體驗一下，下面就給你們來個demo初體驗試試markdown
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 -->
相關文章
- 1. 網頁怎麼解除粘貼複製
- 2. 最新版WPS不能複製粘貼
- 3. 複製粘貼
- 4. 繞過網頁版批改網「禁止粘貼」限制
- 5. windows遠程後不能複製粘貼
- 6. 遠程桌面不能複製粘貼
- 7. 一文搞懂vim複製粘貼
- 8. vim複製粘貼系統粘貼板
- 9. ESNP複製粘貼
- 10. js複製粘貼
- 更多相關文章...
- • MySQL存儲過程簡介 - MySQL教程
- • Redis主從複製的配置方法和執行過程 - Redis教程
- • Github 簡明教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 網頁怎麼解除粘貼複製
- 2. 最新版WPS不能複製粘貼
- 3. 複製粘貼
- 4. 繞過網頁版批改網「禁止粘貼」限制
- 5. windows遠程後不能複製粘貼
- 6. 遠程桌面不能複製粘貼
- 7. 一文搞懂vim複製粘貼
- 8. vim複製粘貼系統粘貼板
- 9. ESNP複製粘貼
- 10. js複製粘貼