时间：2023-09-28 06:18:02 | 来源：网站运营
时间：2023-09-28 06:18:02 来源：网站运营
如何使用js制作精美的网页版PPT：
在线咨询
<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. <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>效果如下图所示: <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>效果如下: <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>关键词：精美,使用
