6月安卓手機好評榜：魅族20 Pro蟬聯冠軍
性能榜和性價比榜之后，我們來看最后的安卓手機好評榜，數據來源安兔兔評測，收集時間2023年6月1日至6月30日，僅限國內市場。第一名：魅族20 Pro好評率：95%5月份的時候魅族20 Pro就是
最近在做產品復盤和技術分享,所以需要做個PPT, 來回顧這半年來的技術貢獻. 但苦于mac上運行PPT那感人的流暢度, 成功的激起了我的強迫癥, 所以索性想辦法通過技術的手段來做個網頁版PPT, 這個時候我發現了reveal.js: 一個使用 HTML 語言制作演示文稿的 Web 框架，支持插入多種格式的內容，并以類似 PPT 的形式呈現. 花了15分鐘系統的調研了一下, 覺得基本滿足技術分享類PPT的要求, 所以決定采用該方案來實現我的網頁版PPT. 這里列一下我用的技術調研:
所以我接下來大致按照以上幾個衡量標準, 來帶大家一起感受一下如何快速通過reveal.js實現一個極具動感的PPT.
首先我先來談談PPT的不足(非專業角度, 技術視角):
所以對于不熟悉PPT套路的技術工作者來說, 往往很難快速制作出精美的PPT.
接下來我們再看看reveal.js的優勢.
說了這么多revealjs的優點,接下來我們就來學習如何使用它吧.
作為一名前端工程師, 我們很容易把 reveal.js 集成到我們的vue或者react項目中, 但是作為演講類型的項目,我們直接用最原始的方式實現即可,首先我們需要引入相關的文件,具體可參考官網所說的步驟去做: revealjs.com/. 最簡單的使用方式如下:
<html> <head> <link rel="stylesheet" href="dist/reveal.css"> <link rel="stylesheet" href="dist/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides"> <section>Slide 1</section> <section>Slide 2</section> </div> </div> <script src="dist/reveal.js"></script> <script> Reveal.initialize(); </script> </body></html>復制代碼這樣通過短短幾行代碼, 我們就能實現一個兩頁的PPT.
當然我們還能實現更加自由的演示動畫, 父子嵌套結構, 專場動畫等. 接下來我們介紹幾個核心API.
父子嵌套主要是一個PPT主題可能包含很多子主題, 要想實現父子主題分明的演示文檔, 在reveal.js也很好實現, 只需要在section內部再包裹section標簽即可. 代碼如下:
<div class="reveal"> <div class="slides"> <section>Slide 1</section> <section> <section> Slide 2-1 </section> <section> Slide 2-2 </section> </section> <section>Slide 3</section> </div></div>復制代碼效果如下圖所示:
我們都知道技術類PPT肯定離不開代碼, 我們在reveal.js中可以很容易的展示我們的代碼,并且支持多種語言, 其框架底層集成了 業界比較有名的highlight.js. 使用方式如下:
Markdown是技術工作者常用的編寫文檔的工具, revealjs同樣也支持使用Markdown的方式來編寫PPT, 是不是很貼切? 具體方式如下:
revealjs支持對每一頁幻燈片使用自定義背景(包括視頻).我們只需要在section標簽中使用data-background即可, 并且支持背景透明. 具體demo如下:
Backgrounnds一共有如下屬性可以使用:
Fragments用來高亮或者漸進式的展現元素.每一個包含fragment類名的元素都被視為漸進的元素, 它們會通過點擊下一步來依次呈現在幻燈片中.
reveal.js提供了很多種不同風格的主題, 我們只需要引入不同的css即可. 包括黑色(black), 白色(white), league, beige, 天空(sky), 夜晚(night)等主題.大家可以自行感受一下.
不同幻燈片進入頁面的動畫方式我們可以使用Transitions來設定. 以下是提供的幾種默認轉場動畫:
具體demo實現如下:
<div class="reveal"> <div class="slides"> <section>Slide 1</section> <section> <section data-transition="fade"> Slide 2-1 </section> <section data-transition="convex"> Slide 2-2 </section> <section data-transition="concave"> Slide 2-3 </section> <section data-transition="zoom"> Slide 2-4 </section> </section> <section>Slide 3</section> </div></div>復制代碼導出PDF作為一個附加功能也算是比較貼心了,如果想了解使用方式可以參考https://revealjs.com/pdf-export/. 接下來我們就來實現一個動態的PPT demo, 供大家學習參考.
效果演示請訪問地址: https://user-gold-cdn.xitu.io/2020/7/13/173473da6ed62d8a?imageslim
代碼如下:
<body> <div class="reveal"> <div class="slides"> <section data-background-image="./img/z1.png" data-background-opacity=".4"> <h1>趣談前端</h1> <p>徐小夕</p> </section> <section> <section data-transition="fade" data-background-color="orange"> <h1>趣談前端 Javascript</h1> </section> <section data-transition="convex" data-background-color="green"> <h1>趣談前端 Vue</h1> </section> <section data-transition="concave" data-background-color="#61dafb"> <h1>趣談前端 React</h1> </section> <section data-transition="zoom" data-background-color="#b32535"> <h1>趣談前端 Angular</h1> </section> </section> <section> <h1>NodeJS</h1> <pre><code data-trim data-noescape> const fs = require('fs') const Koa = require('koa') const app = new Koa() </code></pre> </section> <section> <h3>設計模式</h3> <p class="fragment">觀察者模式</p> <p class="fragment">工廠模式</p> <p class="fragment">迭代器模式</p> </section> <section> <h4>數據結構與算法</h4> </section> </div> </div> <script src="dist/reveal.js"></script> <script src="plugin/notes/notes.js"></script> <script src="plugin/markdown/markdown.js"></script> <script src="plugin/highlight/highlight.js"></script> <script> // More info about initialization & config: // - https://revealjs.com/initialization/ // - https://revealjs.com/config/ Reveal.initialize({ hash: true, // Learn about plugins: https://revealjs.com/plugins/ plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] }); </script></body>復制代碼本文鏈接：http://www.tebozhan.com/showinfo-26-76547-0.html分享一款基于Web的PPT制作框架——Reveal.js
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號