使⽤reveal.js制作⼀个酷炫的⽹页ppt
今天教⼤家使⽤reveal.js，制作⼀个简洁优雅的⽹页ppt。在这之前，你需要⼀些基本的HTML以及CSS的技能基础。
1、准备⼯作
解压⽂件，将相关的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>
<!-- reveal基本的css  -->
<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>
<!-- reveal基本的js，⾥⾯集成了⼀些转场动画 -->
<script src="js/reveal.js"></script>
</body>
</html>
2、制作第⼀页ppt
在html页⾯中创建两个div块级元素，注意，class类名必须分别为reveal和slides。在第⼆层div中创建section标签，每⼀个<section>块都⽣成⼀张单独ppt。最后，在js代码中对页⾯进⾏初始化。
<!-- 这⾥省略引⼊css代码，记得加上 -->
<div class="reveal">
<!-- 所有的幻灯⽚都放在⼀个类为slides的div中 -->
<div class="slides">
<!-- 每⼀个<section>块都⽣成⼀张单独ppt -->
<section>
<!-- ppt标题 -->
<h1>How to use jQuery</h1>
<!-- ppt正⽂ -->
<p>
<small>Presented by <a href="">MayanDev</a></small>
</p>
</section>
</div>
</div>
<!-- 这⾥省略引⼊js代码，记得加上 -->
<script type="text/javascript">
// 初始化页⾯
Reveal.initialize();
</script>
保存，⽤浏览器打开，显⽰效果如下图。（F全屏，ESC退出）
3、fragment类
这⾥再第⼀页的基础上再添加⼀个section，其中fragment类表⽰分条显⽰，当键盘按下?键时触发。s
ection中还可以包含section，放映的⽅式为向下放映。通过data-background属性可以设置幻灯⽚的背景颜⾊或者图⽚，甚⾄可以使⽤视频当作背景。
<!-- 这⾥省略第⼀页及其他内容 -->
<!-- 第⼆页 -->
<section>
<!-- section中还可以包含section，放映的⽅式为向下放映 -->
<section>
<h2>Hello There</h2>
<!-- fragment类表⽰分条显⽰，当键盘按下?键时触发 -->
<p class="fragment">Today, we are gonna talk about the jQuery.</p>
<!-- 添加⼀个图⽚链接 -->
<a class="fragment"href="jquery/download/"><img width="240"height="180"data-src="images/jquery_logo.gif"alt="jquery_logo"></a> </section>
<!-- 通过data-background熟悉可以设置幻灯⽚的背景颜⾊或者图⽚，甚⾄可以使⽤视频当作背景 -->
<section  data-background="#dddddd">
<h2>But then, </h2>
<p class="fragment">You need some HTML,CSS and JavaScript skills to be able to use jQuery effectively.
</section>
</section>
保存⼀下，看看效果如下图。
4、页⾯的配置
页⾯的配置是通过js完成的。
controls：是否显⽰左下⾓的控制键，默认为true
progress：是否显⽰进度条，默认为true
center：是否在居中显⽰，默认为true
transition：为页之间的切换动画，默认为slide，即⽔平滑动，这⾥我们改成zoom缩放看看效果
<script type="text/javascript">
// 初始化页⾯
Reveal.initialize({
controls:true,// 是否显⽰左下⾓的控制键，默认为true
progress:true,// 是否显⽰进度条，默认为true
center:true,// 是否在中间显⽰，默认为true
// transition为页之间的切换动画，默认为slide，即⽔平滑动，这⾥我们改成zoom缩放试试
transition:'zoom',// none/fade/slide(default)/convex/concave/zoom
});
</script>
保存，⽤浏览器打开，效果如下。
5、⼩结
以上就是本次教程的全部内容，如果认为默认的ppt样式不好看，你可以⾃⼰编写css代码对样式进⾏修改。关注「嗜码」，后台回复reveal可以下载插件，另外，我⾃⼰做了⼀个关于jQuery介绍的ppt，也放在⾥⾯了，⼤家也可以去下载。
Be creative, build your own.
欢迎加我，⼀起交流，互相学习，共同进步！
关注『嗜码』。回复关键字「前端」、「Python」、「Java」、「Android」、「⼩程序」、「Vue」等获取免费精品学习资料。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。