CSS 一笔画动画原理介绍

之前弄了一个域名及签名的一笔画动画,但只是做了一个结果展示,背后的原理没有去介绍,这次则弄了一个详细的原理介绍,参见:

//exp.xiaogd.net/demo/css/stroke-animate/sa-demo.html

这次就没有去做什么幻灯片了,感觉那种形式也有其不灵活之处,这次还是回归了传统的方式,但跟传统的博客又有所区别。

主要是增加了一些互动方面的元素,用户可以与页面进行一定的交互,比如播放动画演示,通过一些输入元素实时调整参数的值以观察效果方面的改变。我感觉这种知识介绍与交互的糅合在增进用户理解方面还是有一定优势的。

当然现在的交互还是比较简单的,如果你有更好的想法,欢迎留言!

域名和签名的 CSS 一笔画动画

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

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

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

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

minifier——一个 nodejs 的 js 及 css 压缩插件

简要介绍了如何通过 minifier 插件来精简压缩 js 和 css 文件。

minifier 是一个 nodejs 下的用于压缩 js 和 css 文件的插件。

首先确保已经安装了 nodejs 的环境,然后通过以下命令安装此插件: 继续阅读“minifier——一个 nodejs 的 js 及 css 压缩插件”

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)。

Web 开发的几本必读之书推荐

Web 开发的几本必读之书推荐,O’Relly 的动物书权威指南系列。

对于 web 开发,之前推荐了 W3schools——一个学习 HTML,CSS 和 Javascript 的好网站这个网站。对于初步了解,这已经够了,但想进一步了解,那就要通过书籍了。

总体而言,IT 技术书籍方面,O’Relly 出版社的《XXX 权威指南》系列是不错的。对于 web 方面,我觉得以下几本书值得一看。(单击图片链接查看具体详情) 继续阅读“Web 开发的几本必读之书推荐”