一个奇怪的样式问题, 想去掉 a 标签的下划线样式, 于是增加了以下样式

a {
    text-decoration: none;
}

也就是 text-decoration: none;, 可是却不生效, 链接的下划线还是存在, 网上找了一下原因, 最后在 Stack Overflow 一个帖子 上看到有人说如果是 wordpress 主题, 还要增加一个 box-shadow: none;, 如下:

a {
    text-decoration: none;
    box-shadow: none;
}

加完后果然行了, 也不清楚是为啥...

css 的一个问题就是, 很多特性不满足简单的可加性, 经常有各种限制或在某种条件下才生效的情况.

所以, 除非你比较系统地掌握了 css, 否则你还是会经常碰到一些问题...

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 中做好,然后复制到网页中即可。

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