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. CVPR 2020 论文大盘点-光流篇
- 2. Photoshop教程_ps中怎么载入图案？PS图案如何导入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 导入源码包
- 6. python学习 day2——基础学习
- 7. 3D将是页游市场新赛道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 图片(pgn显示、jpg不显示)解决方案
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 网页怎么解除粘贴复制
- 2. 最新版WPS不能复制粘贴
- 3. 复制粘贴
- 4. 绕过网页版批改网“禁止粘贴”限制
- 5. windows远程后不能复制粘贴
- 6. 远程桌面不能复制粘贴
- 7. 一文搞懂vim复制粘贴
- 8. vim复制粘贴系统粘贴板
- 9. ESNP复制粘贴
- 10. js复制粘贴