CSS 绘制三角形原理演示(动画)V3 版,具体参见以下链接:

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

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

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

一些存在的问题:

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

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

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

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

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

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