经常看到有些网站欢迎页会有一些动态的文字书写动画效果，看起来就会让人觉得很舒服，刚好最近在学svg，发现scg也可以实现这种效果，于是就上手自己写了下。
svg的基础知识和动画实现的原理就不过多描述了，看上一篇。
原理都知道，那么剩下的难点就是怎么把文字按照顺序书写出来，那么如何写svg呢，果断贝塞尔曲线啊，推荐一个网站，可以现在获取对应形状的贝塞尔曲线。
工具有了，那么就开始干吧
<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="500" viewBox="0 0 2000 800">
<!-- z: -->
<path id="l1" fill="none" stroke="#2486b9" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="902" stroke-dashoffset="902" d="M50 400 c-91 -128 284 -143 113 77 c131 196 -273 209 160 -91 "/>
<!-- m: -->
<path id="l2" fill="none" stroke="#2486b9" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="691" stroke-dashoffset="691" d="M325 385 c76 -66 -18 149 96 -26 c87 -97 3 211 118 -41 c82 -108 -24 236 106 104 "/>
<!-- h: -->
<path id="l3" fill="none" stroke="#2486b9" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1096" stroke-dashoffset="1096" d="M644 424 c353 -394 -55 -393 92 -33 c41 79 61 -7 90 -70 c29 -90 48 -40 55 109 c1 40 19 20 38 15"/>
<!-- e: -->
<path id="l4" fill="none" stroke="#2486b9" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="628" stroke-dashoffset="628" d="M919 443 c386 -265 -185 -202 133 -4 q55 19 87 -43"/>
<!-- a: -->
<path id="l5" fill="none" stroke="#2486b9" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="737" stroke-dashoffset="737" d="M1312 330 c-19 -89 -112 -75 -145 -22 c-83 182 104 129 144 30 c38 181 134 24 133 -2"/>
<!-- n: -->
| <path id="l6" fill="none" stroke="#2486b9" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="519" stroke-dashoffset="519" d="M1450 330 c47 -147 3 211 118 -41 c82 -108 -24 236 106 104 "/>
<!-- g: -->
<path id="l7" fill="none" stroke="#2486b9" stroke-width="25" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1044" stroke-dashoffset="1044" d="M1670 390 c386 -265 -185 -202 133 -4 c238 225 -265 231 82 -60"/>
</svg>
按照字母写，便于接下来好控制动画效果
其中stroke-dasharray的值是计算出来的。基础搞好了，那就剩下动画了。
#l1 {
animation:spin1 linear 1.5s 1;
animation-fill-mode: forwards;
}
@keyframes spin1 {
form {
stroke-dashoffset: 902
}
to {
stroke-dashoffset: 0
}
}
animation-fill-mode: forwards是控制动画停留在最后一帧，每个字母之间控制好animation-delay的间隔就好了
这只是最初的简化版，更复杂一点的是实现毛笔字效果，但是那样的工程量有点大，现阶段要学的东西还很多，就不把时间浪费在这上面了
