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

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

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

现在重新做了些修改,V2 版本参见:

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

主要的一些改进如下:

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

如果你有什么改进意见,欢迎留言!

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

用步步深入并结合动画的的方式演示了 CSS 绘制三角形的原理,具体幻灯片见以下链接:

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

tip:只支持现代浏览器(不支持手机浏览器),最好是 chrome。使用空格或箭头键来导航,可以使用全屏方式观看(在 chrome 等浏览器中,快捷键一般为 F11)。