之前看过别人用 CSS 的属性 stroke-dasharray 和 stroke-dashoffset 制作的一笔画动画，觉得挺好玩的，也就自己做了个：

//exp.xiaogd.net/hm/demo/css/stroke-animate/stroke-animation.html

总共两个动画，一个是自己的域名 xiaogd.net，另一个是自己的签名，其中 svg 中的 path 提前在 inkscape 中做好，然后复制到网页中即可。

动画的实现感兴趣的同学可以查看网页的源代码了解。

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

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

上一个版本曾经留下两个问题，一个是在微软 edge 浏览器上，部分代码高亮增强插件工作不正常，导致整体显示完全崩溃。看了下是某个 DOM 的新增 api 在 edge 上不支持导致的。我的 edge 版本是 14，在 caniuse.com 上显示，它对这个特性的支持度是“Partial support with prefix: ms”，升级 edge 到 15 或以上版本应该可以解决，不过我也没有去尝试升级。

因为用 edge 的程序员应该并不多，这段时间以来原插件也一直没有去修正这个支持，因为整个插件追求的是极简，我估计它们也不会去支持要带前缀的特性，所以这里也不打算去解决这个问题。

另一个问题是某些子步骤不能回退或在回放过程中行为不一致，这次已经修正，所有子步骤可以回退且行为一致。

其它的一些调整：

  1. 在退回到上一张幻灯片时，保持所有已显示的子步骤为显示状态。原先的行为是回去时所有子步骤又重新隐藏，如果读者只是想回去看看之前的状态，又要重新 next 出所有的子步骤，个人觉得这个体验不是太好，而且会导致在回放过程中个别复杂的行为不一致。这个调整部分修改了 impress.js中的源码。
  2. 在部分子步骤呈现过程中使用了动态箭头的引导。我个人感觉时用户在看的过程有可能会失去焦点，因为他有时不知道下一个子步骤会在哪里呈现。当然，你也可能觉得这些是种干扰。这里主要还是想尝试下这种可能性，暂时也写得比较随意，没有将这些行为完全的脚本化。一种更好的引导方式或许是之前介绍的 product feature tour 的那种 mask and highlight 的方式。也初步看了下那种方式，跟 impress 的行为有点类似，估计无法简单整合，后面再看看吧。
  3. 其它的一些小调整及代码方面的部分优化。

就这个主题而言，这个可能是最后一个版本了，不打算再去改进了。个人感觉随着想深入的应用某些特性，impress.js 所施加的限制还是很大，方式也不够灵活。因为它本来的目的也只是用来做 presentation 的，是要结合人的演说的，这里单纯的用于一种被动的展示，受到某些限制也很正常。

在我年纪轻轻，阅历尚浅的时候，父亲曾教导过我一句话，至今还萦绕在我心中。 “无论何时，当你想要批评任何人的时候， ”他对我说，“请记住，这世界上并不是所有的人都拥有像你这样的好条件。”
——来自《了不起的盖茨比》开场白
> >
"In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since. Whenever you feel like criticising any one, he told me, just remember that all the people in this world haven’t had the advantages that you’ve had.”
>
—— The Great Gatsby