谢谢
最后更新于：2022-04-01 07:26:37
#谢谢观赏
宽度不够？？
最后更新于：2022-04-01 07:26:35
## 宽度不够？？
---
按下键盘【W】键，切换到更宽的页面看效果，第二次按键返回
| |less| sass | stylus|
|:-------|:------:|-------:|--------|
|环境 |js/nodejs | Ruby(这列右对齐) | nodejs(高亮) {:.highlight}|
|扩展名 | .less | .sass/.scss | .styl|
|特点 | 老牌，用户多，支持js解析 | 功能全，有成型框架，发展快 | 语法多样，小众|
|案例/框架 | [Bootstrap](http://getbootstrap.com/) | [compass](http://compass-style.org) [bourbon](http://bourbon.io) | |
快速翻页
最后更新于：2022-04-01 07:26:33
## 快速翻页
----
1. 输入页码，然后enter
2. 使用O键，开启纵览模式，然后翻页
快捷键
最后更新于：2022-04-01 07:26:31
#快捷键介绍
这是一个vertical3d的动效
最后更新于：2022-04-01 07:26:28
## 这是一个vertical3d的动效
----
使用方法：
[slide data-transition="vertical3d"]
这是一个zoomin的动效
最后更新于：2022-04-01 07:26:26
[slide data-transition="zoomin"]
## 这是一个zoomin的动效
----
使用方法：
[slide data-transition="zoomin"]
这是一个glue的动效
最后更新于：2022-04-01 07:26:24
[slide data-transition="glue"]
## 这是一个glue的动效
----
使用方法（全局设置）
> transition: glue
支持多达20多个转场动效
最后更新于：2022-04-01 07:26:21
## 20种转场动效随心换
----
* slide/slide2/slide3
* newspaper
* glue
* kontext/vkontext
* move/circle
* horizontal/horizontal3d
* vertical3d
* zoomin/zoomout
* cards
* earthquake/pulse/stick...
动效：bounceIn
最后更新于：2022-04-01 07:26:19
## 动效：bounceIn
----
* 列表支持渐显动效哦 {:&.bounceIn}
* 动效类型
* fadeIn
* rollIn
* bounceIn
* moveIn
* zoomIn
动效：zoomIn
最后更新于：2022-04-01 07:26:17
## 动效：zoomIn
----
* 列表支持渐显动效哦 {:&.zoomIn}
* 动效类型
* fadeIn
* rollIn
* bounceIn
* moveIn
* zoomIn
动效：fadeIn
最后更新于：2022-04-01 07:26:15
## 动效：fadeIn
----
* 列表支持渐显动效哦
* 使用方法
* markdown列表第一条加上 {:&.动效类型}
* fadeIn {:&.fadeIn}
* 动效类型
* fadeIn
* rollIn
* bounceIn
* moveIn
* zoomIn
第一部分：介绍单页slide内动效
最后更新于：2022-04-01 07:26:12
[magic data-transition="earthquake"]
## 演示magic标签效果
-----
<div class="columns3">
<img src="http://qdemo.sinaapp.com/girl.jpg" height="450">
<img src="http://qdemo.sinaapp.com/girl.jpg" height="450">
<img src="http://qdemo.sinaapp.com/girl.jpg" height="450">
</div>
========
## 演示earthquake转场效果
-----
<div class="columns4">
<img src="http://qdemo.sinaapp.com/girl.jpg" height="320">
<img src="http://qdemo.sinaapp.com/girl.jpg" height="320">
<img src="http://qdemo.sinaapp.com/girl.jpg" height="320">
<img src="http://qdemo.sinaapp.com/girl.jpg" height="320">
</div>
[/magic]
动效和转场演示
最后更新于：2022-04-01 07:26:10
动效和转场演示
表格示例
最后更新于：2022-04-01 07:26:08
## 表格示例
### 市面上主要的css预处理器：Less\Sass\Stylus
---
| | Less | Sass | Stylus|
|:-------|:------:|-------:|--------|
|环境 |js/nodejs | Ruby(这列右对齐) | nodejs(高亮) {:.highlight}|
|扩展名 | .less | .scss/.sass | .styl|
|特点 | 老牌，用户多，支持js解析 | 功能全，有成型框架，发展快 |语法多样，小众|
|案例/框架 | [Bootstrap](http://getbootstrap.com/) | [Compass](http://beta.compass-style.org) [Bootstrap](http://getbootstrap.com/css/#sass) [Foundation](http://foundation.zurb.com/) [Bourbon](http://bourbon.io) [Base.Sass](https://github.com/jsw0528/base.sass) | |
主页面样式
最后更新于：2022-04-01 07:26:05
## 主页面样式
### ----是上下分界线
----
这里是内容
自定义class、id
最后更新于：2022-04-01 07:26:03
## 支持.class/#id/自定义属性样式
----
```html
使用：.class{:.class}
使用：#id{:#id}
组合使用：{:.class.class2 width="200px"}
父元素样式使用&：{:&.class}
```
背景图片
最后更新于：2022-04-01 07:26:01
[slide style="background-image:url('http://file06.16sucai.com/2016/0108/9e8704cffd5f631eadb1b8026cf0721f.jpg')"]
# 支持添加背景图片 {:&.flexbox.vleft}
使用方法：[slide style="background-image:url('http://file06.16sucai.com/2016/0108/9e8704cffd5f631eadb1b8026cf0721f.jpg')"]
完全style写法，更加灵活，视频背景、repeat背景更不在话下
样式展示
最后更新于：2022-04-01 07:25:59
# 样式展示 {:&.flexbox.vleft}
> nodePPT 让每个人都爱上做分享！
封面样式
最后更新于：2022-04-01 07:25:56
# 封面样式
## h1是作为封面用的，内部的都用h2
<small>演讲者：xxx</small>
基本语法和样式演示
最后更新于：2022-04-01 07:25:54
# 基本语法和样式演示