使用reveal.js制作一个酷炫的网页ppt

╰半橙微兮° 2022-05-23 04:16 236阅读 0赞

> 今天教大家使用reveal.js，制作一个简洁优雅的网页ppt。在这之前，你需要一些基本的HTML以及CSS的技能基础。

![这里写图片描述][70]

##### 1、准备工作 #####

*  下载插件，插件下载地址：[https://github.com/hakimel/reveal.js][https_github.com_hakimel_reveal.js]
 *  解压文件，将相关的js以及css引入html界面

<!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    		<title>reveal.js</title>
    		
    		<link rel="stylesheet" href="css/reveal.css">
    		
    		<link rel="stylesheet" href="css/theme/black.css">
    		
    		<link rel="stylesheet" href="lib/css/zenburn.css">
    
    	</head>
    	<body>
    
    		
    		<script src="js/reveal.js"></script>
    	</body>
    </html>

##### 2、制作第一页ppt #####

在html页面中创建两个div块级元素，`注意，class类名必须分别为reveal和slides`。在第二层div中创建section标签，每一个<section>块都生成一张单独ppt。最后，在js代码中对页面进行初始化。

<div class="reveal">
        
        <div class="slides">
    
        
            <section>
            	
                <h1>How to use jQuery</h1>
                
                <p>
                    <small>Presented by <a href="">MayanDev</a></small>
                </p>
            </section>
        </div>
    </div>
    
    <script type="text/javascript"> // 初始化页面 Reveal.initialize(); </script>

保存，用浏览器打开，显示效果如下图。（`F`全屏，`ESC`退出）

![first][]

##### 3、fragment类 #####

这里再第一页的基础上再添加一个section，其中fragment类表示分条显示，当键盘按下?键时触发。section中还可以包含section，放映的方式为向下放映。通过`data-background`属性可以设置幻灯片的背景颜色或者图片，甚至可以使用视频当作背景。

<section>
    
    	
    		<section>
    			<h2>Hello There</h2>
    			
    			<p class="fragment">Today, we are gonna talk about the jQuery.</p>
    			
    			<a class="fragment" href="http://jquery.com/download/"><img width="240" height="180" data-src="images/jquery_logo.gif" alt="jquery_logo"></a>
    		</section>
    		
    		<section data-background="#dddddd">
    			<h2>But then, Believe me...</h2>
    			<p class="fragment">You need some HTML,CSS and JavaScript skills to be able to use jQuery effectively.
    		</section>
    
    </section>

保存一下，看看效果如下图。

![这里写图片描述][70 1]

##### 4、页面的配置 #####

页面的配置是通过js完成的。

*  controls：是否显示左下角的控制键，默认为true
 *  progress：是否显示进度条，默认为true
 *  center：是否在居中显示，默认为true
 *  transition：为页之间的切换动画，默认为slide，即水平滑动，这里我们改成zoom缩放看看效果

保存，用浏览器打开，效果如下。  
![这里写图片描述][70 2]

##### 5、小结 #####

以上就是本次教程的全部内容，如果认为默认的ppt样式不好看，你可以自己编写css代码对样式进行修改。关注公众号「嗜码」，后台回复`reveal`可以下载插件，另外，我自己做了一个关于jQuery介绍的ppt，也放在里面了，大家也可以去下载。

> Be creative, build your own.

--------------------

欢迎加我微信，一起交流，互相学习，共同进步！

![在这里插入图片描述][20190315083734931.jpg]  
关注公众号『嗜码』。回复关键字「前端」、「Python」、「Java」、「Android」、「小程序」、「Vue」等获取免费精品学习资料。  
![在这里插入图片描述][20190315083756375.png]

[70]: /images/20220523/88ccbac3795a4eeca623f3bf3669f80c.png
[https_github.com_hakimel_reveal.js]: https://github.com/hakimel/reveal.js
[first]: /images/20220523/c03d62fa9d814c76b359cf98fad95b54.png
[70 1]: /images/20220523/3afe8889902f4683b582876414d7f7cd.png
[70 2]: /images/20220523/f01698d31fd343e8aa3bf5d8ae391bde.png
[20190315083734931.jpg]: /images/20220523/d6b5d35276e14a2a942822c5b5775932.png
[20190315083756375.png]: /images/20220523/bac3fd8ecd10434498e6199ab2e922a4.png