CSS 绘制三角形原理演示（动画）V3 版，具体参见以下链接：

//exp.xiaogd.net/hm/demo/css/css-border/v3/cbt_slide.html

此版本的改进有以下几点：

  • 更加细化的步骤。
  • 步骤间的连接过渡更加友好，具体为在下一步骤中尽量保留上一步的结果，并在此基础上演化。
  • 调整部分页面布局为左右两栏，充分利用页面空间。
  • 代码高亮方面的一些特性使用，使阅读更加友好。
  • 去掉一些步骤，比如删掉了背景颜色部分。
  • 去掉了过于花哨的连接动画，比如旋转方面的。
  • 其它一些小的改进，如增大了 border 的尺寸，把颜色从粉色改为红色，增加了部分文字的移入移出效果等。

一些存在的问题：

1、在 Edge 浏览器上有问题，由代码高亮增强插件导致。

2、某些子步骤不能回退或在回放过程中行为不一致，需要重新刷新页面。

这点由于框架本身并太支持过于细化和灵活的步骤，自己利用了一些 hack 的形式来达到某些效果，手写了不少的 js。目前来说，至少正常按顺序浏览没有太大问题，但要支持回退则还有许多琐碎的事要做，暂时也没有通盘去考虑这些，只是先对付了事，想达到较好的效果恐怕还要修改框架的源码。

最后我想说一点是，对于这个问题我目前已经做了有三个版本，但并不是说这个问题多么重要，又或者是我对它有什么特别的兴趣，都不是的。

或许后面会写些其它方面的主题。

我主要是想探索一些展示知识的新方式，探讨一些可能性以及评估这些工作的难度。所以，还是跟之前那样，如果你有什么意见或建议，欢迎留言！

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

CSS 绘制三角形原理演示（动画）(旧版)（不推荐）

现在重新做了些修改，V2 版本参见：

CSS 绘制三角形原理演示（动画）V2 版

主要的一些改进如下：

  • 增加了子步骤，一页中内容过多时可以逐步呈现。
  • 增加了代码的高亮。（使用了 prism.js）
  • 增强的 impress.js，增加了导航按钮，下拉选择列表，进度条以及自动播放等特性。
  • 重新规划了页面的整体布局，在结尾增加了预览页。
  • 增加了部分动画演示，调整了部分语句及顺序等。
  • 支持在手机端阅读（不过导航效果等还不太好，仍不推荐在手机端阅读）。

如果你有什么改进意见，欢迎留言！