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

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

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

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

一些存在的问题:

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

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

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

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

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

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

Impress.js——一款 javascript 演示(presentation)框架

impress.js 是一款 javascript 的演示(presentation)框架。

所谓演示,简单讲就是做 PPT。不过它是直接使用 web 技术,也即是 html,css,js 这些技术来制作 PPT。

它主要利用了现代浏览器所支持的 CSS3 中的 transforms 和 transition,其想法受 prezi.com 网站所启发。

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js 的官网见这里:https://github.com/impress/impress.js

一个官方的示例(demo)见这里:http://impress.github.io/impress.js/#/bored

更多示例可参考官网下的介绍。