之前看过别人用 CSS 的属性 stroke-dasharray 和 stroke-dashoffset 制作的一笔画动画,觉得挺好玩的,也就自己做了个:
//exp.xiaogd.net/hm/demo/css/stroke-animate/stroke-animation.html
总共两个动画,一个是自己的域名 xiaogd.net,另一个是自己的签名,其中 svg 中的 path 提前在 inkscape 中做好,然后复制到网页中即可。
动画的实现感兴趣的同学可以查看网页的源代码了解。