复刻antfu大佬的svg签名效果
点击关注公众号，“技术干货”及时达！
?I love three things in the world, the sun the moon and you, the sun is for the day, the moon is for the night and you forever
?前言在逛antfu大佬的个人网站时，看到一个很有风格的艺术签名，而且就像在网页上自动签字的效果一样，感觉很酷呢！
好了，不羡慕了，我立刻，马上想要一个。
准备工作先了解 SVG，以及SVG的动画，还有如何设计线条，有了方向，有了疑问，接下来就好说了，向着方向，解决疑问就ok了，这里我查看了三篇大佬的博文：
How SVG Line Animation WorksAnimated line drawing in SVGAnimated SVG logo感兴趣可以去看看，或者接着看这篇文章
线条设计这里我使用了 figma 工具来进行设计：
先找一个你想要的艺术连体字使用 figma 钢笔工具，按照这个连体字打点描绘将打点完成的线条导出为 SVG最终SVG效果：
自己觉得满意就行
SVG图形在这种线段图形中，有两个重要的属性stroke-dasharray和stroke-dashoffset
stroke-dasharray:允许您指定线条的渲染部分的长度，然后指定间隙的长度stroke-dashoffset:允许您更改 dasharray 的开始位置
当stroke-dasharray和stroke-dashoffset其实都是一个足够大的值（超过了线条的长度）时，这时会是一个完整的图案，随着 dashoffset 减小变成0的过程就是一个绘画的过程了，最后通过css添加上动画，就可以让这个 svg 看起来自动签名的感觉了。
动画@media(prefers-reduced-motion){
path{
animation:none!important;
stroke-dasharray:unset!important;
}
}
@keyframesgrow{
0%{
stroke-dashoffset:1px;
stroke-dasharray:0600px;
opacity:0;
stroke:#00aeef;
}
10%{
opacity:1;
}
40%{
stroke-dasharray:600px0;
stroke:#ed1c24;
}
/*Movingback*/
85%{
stroke-dasharray:600px0;
stroke:#8cd790;
}
95%,
to{
stroke-dasharray:0600px;
stroke:#f69f37;
}
}
path{
stroke-dashoffset:1px;
stroke-dasharray:600px0;
animation:grow10seaseforwardsinfinite;
transform-origin:center;
stroke:#303030;
animation-delay:0s;
}
记得 dasharray 的长度一定要大于等于svg中线条的长度，不然就会变成分段线条
点击关注公众号，“技术干货”及时达！
阅读原文
网站开发网络凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，累计为4000多家客户提供品质建站服务，得到了客户的一致好评。如果您有网站建设、网站改版、域名注册、主机空间、手机网站建设、网站备案等方面的需求...
请立即点击咨询我们或拨打咨询热线：13245491521 13245491521 ，我们会详细为你一一解答你心中的疑难。 项目经理在线
13245491521 13245491521