CSS 绘制三角形原理演示(动画)V2 版

之前也曾写了一个类似的演示,因为一开始弄 impress.js,一些特性还不熟悉,做得相对较差了些,现在依旧可以访问:

CSS 绘制三角形原理演示(动画)(旧版)(不推荐)
现在重新做了些修改,V2 版本参见:
CSS 绘制三角形原理演示(动画)V2 版
主要的一些改进如下:
  • 增加了子步骤,一页中内容过多时可以逐步呈现。
  • 增加了代码的高亮。(使用了 prism.js)
  • 增强的 impress.js,增加了导航按钮,下拉选择列表,进度条以及自动播放等特性。
  • 重新规划了页面的整体布局,在结尾增加了预览页。
  • 增加了部分动画演示,调整了部分语句及顺序等。
  • 支持在手机端阅读(不过导航效果等还不太好,仍不推荐在手机端阅读)。
如果你有什么改进意见,欢迎留言!

impress.js 的一个本地演示

在之前的 Impress.js——一款 javascript 演示(presentation)框架曾对 impress.js 做了一个简单介绍,还给出了一个官方 demo 的链接。

不过没有梯子的话,访问可能不太稳定,所以这次把它搬到了本地,你可以通过以下链接访问:

impress.js official demo(english version)
另外,官方的是英文版,我也简单翻译了一个中文版的:
impress.js 官方演示(中文版)
最后,照猫画虎,自己也简单折腾了一个,当然就简陋多了,只能算个丑小鸭版:
impress.js——我做的一个简单演示
以上也可以在 //exp.xiaogd.net/ 里找到。

总结一下,impress.js 的过渡效果还是不错的,制作一些简单的幻灯片也比较容易。缺点的话,它基本没有什么缺省的设置,包括定位方面都要一一自己去指定。另外也没有办法定义子步骤,可能要自行去扩展,或使用一些插件之类。最后,如果要进行复杂的演示,还是要自己手写相当多的 html,css 以及 js。