今天在网上闲逛，去于小丘家逛，看到了他的一篇文章，【重制保姆级】于小丘Blog同款动态Logo制作教程，看完感觉有意思了，大家可以同时打开他的帖子，一起看，然后来自己制作自己想要的svg动态图，很好玩。

一、准备工作

首先安装好Adobe Illustrator（以下简称AI）、Visual Studio Code（一下简称VSC）然后再Visual Studio Code安装svg的插件，最排前的就行一个就够了。这些软件在微软的应用商店可以下载，也可以去网上找便携版、绿色版、免安装版下载，我用的基本都是免安装板（请你支持正版），安装好各个软件后，推荐你去下载可以上用的字体，注意是可以商用的，别那天你的站访问量爆棚，别摊上官司......字体我这里用的阿里的字体，因为阿里巴巴普惠的字体可以商用，我用的2.0现在好像有3.0了，做好准备咱们来吧。

二、制作过程

1、使用AI造图

我这边打算在留言本里放个动态图，880×70就够了，先用AI，创建画布

然后自己排个版我排版的比较花哨，效果如下，排版的过程我就不说了，大家可以自己去找找AI的使用教程。

然后点文件→导出→导出为→保存类型选择svg，如下图

注意下面我图贴错了，字体应选择为轮廓，切记切记！

2、用VSC编辑svg文件

①编辑导出的svf文件

用VSC打开文件后，发现导出的svg文件是压缩的，使用快捷键Shift+Alt+F，格式化一下代码。先后对比如下。

上面的<style>与</style>之间就是特效的js代码，下面的path class="a"其中a事就是对应的每个字我的a有三个就是x→ī→怸，注意：我作图时用的字体都是阿里的字体，排版是插入一个文本框，上行是拼音，下行是数字，同时设置了颜色，所以导出时会有三个class="a"，然后下一个就是w→ā→i→歪，依此类推，然后后面文字也是单独的文本框，所以就会出现a→怸、b→歪 、c→小、d→站后面的四句分别为e、f、g、h。

下面就是把a到h按照class数量进行加序号，我这里a有3个、就依次改成a1、a2、a3

    <path class="a1"
        d="M14.62,12.39,10.27,5.87h4.2l2.6,4.35h.14l2.6-4.35H24l-4.32,6.5,4.57,6.85H20l-2.77-4.6H17l-2.82,4.6H10Z" />
    <path class="a2" d="M22.43.83h8V3.62h-8Zm2.2,5h3.58V19.22H24.63Z" />
    <path class="a3"
        d="M0,62.17A63.29,63.29,0,0,0,4.88,51l5.2,2.08q-1.12,3-2.55,6.15A58.53,58.53,0,0,1,4.75,64.7ZM.05,44.85a46.27,46.27,0,0,0,14.37-7.46H2.22v-5.2H17.63v-6l5.43.23v5.78h6.51c-1.63-1.2-3-2.14-4.11-2.8l2.75-3.84a71,71,0,0,1,6,4l-1.72,2.66h5.88v5.2H25.86a53.31,53.31,0,0,0,14.7,7.42l-2.44,5.78a85.89,85.89,0,0,1-8.41-4.13,42.79,42.79,0,0,1-6.65-4.59V48H17.63V41.91a43.21,43.21,0,0,1-6.55,4.5,90.82,90.82,0,0,1-8.37,4.14ZM26.68,56.16l5.24,2c-.18,1.45-.36,2.68-.54,3.71a8.14,8.14,0,0,1-1,3,3.28,3.28,0,0,1-1.92,1.36,18.26,18.26,0,0,1-3.75.5c-1,.06-2.43.09-4.39.09s-3.44,0-4.43-.09c-2-.09-3.49-.55-4.32-1.36s-1.24-2.17-1.24-4.07v-10l5.51.22v7.65A3.11,3.11,0,0,0,16.19,61a2.35,2.35,0,0,0,1.58.52c1.39.06,2.41.09,3.07.09s1.71,0,3-.09a7.51,7.51,0,0,0,1.43-.23,1.09,1.09,0,0,0,.63-.5,3.88,3.88,0,0,0,.34-1.26A26.27,26.27,0,0,0,26.68,56.16Zm-5.47-7.64c1.29,1.5,3,3.72,5,6.64L21.7,58.73c-.51-.84-1.3-2-2.37-3.59s-1.92-2.71-2.56-3.46ZM33.59,50.1c1.12,1.53,2.38,3.37,3.8,5.49S40,59.5,40.83,61l-5,3.48q-1.17-2.18-3.16-5.38T29,53.44Z" />
    <path class="b1"
        d="M46.76,5.65h3.8l2.1,9.63h.15l2.34-9.63H59.2l2.34,9.63h.15l2.1-9.63h3.75L63.89,19H59.4L57.2,9.88h-.15L54.85,19H50.36Z" />
    <path class="b2"
        d="M72.38,5.43a12,12,0,0,1,2.83.29,5,5,0,0,1,1.85.82,3,3,0,0,1,1,1.35,5,5,0,0,1,.31,1.86V19H75.17l-.34-1.56a3.37,3.37,0,0,1-1.51,1.27,6.14,6.14,0,0,1-2.74.53,5.08,5.08,0,0,1-3.41-1A3.84,3.84,0,0,1,66,15.16a3.64,3.64,0,0,1,1.4-3.26A7.28,7.28,0,0,1,71.49,11H74.8v-.34a3.79,3.79,0,0,0-.11-1,1.22,1.22,0,0,0-.43-.67,2.13,2.13,0,0,0-.87-.39A6.8,6.8,0,0,0,72,8.42c-.47,0-.95,0-1.43.06a12.93,12.93,0,0,0-1.41.19v-3c.51-.07,1.07-.12,1.66-.15S71.91,5.43,72.38,5.43Zm4.74-2h-8V.62h8ZM71.49,16.49a4.6,4.6,0,0,0,2.1-.43,2.56,2.56,0,0,0,1.21-1.12V13.38H72a4.29,4.29,0,0,0-1.92.32A1.41,1.41,0,0,0,69.54,15,1.31,1.31,0,0,0,70,16.16,2.58,2.58,0,0,0,71.49,16.49Z" />
    <path class="b3"
        d="M81.69,3.8a6.81,6.81,0,0,1-1-.06,1.15,1.15,0,0,1-.61-.26,1,1,0,0,1-.31-.57,4.4,4.4,0,0,1-.09-1,4.39,4.39,0,0,1,.09-1,1,1,0,0,1,.31-.56A1,1,0,0,1,80.7.1a9.93,9.93,0,0,1,2,0,1,1,0,0,1,.6.25,1,1,0,0,1,.31.56,4.39,4.39,0,0,1,.09,1,4.4,4.4,0,0,1-.09,1,1,1,0,0,1-.31.57,1.15,1.15,0,0,1-.6.26A6.77,6.77,0,0,1,81.69,3.8Zm-1.8,1.85h3.58V19H79.89Z" />
    <path class="b4"
        d="M67.71,60H84.19v5H44.72V60H51V50.91l5.78.23V60h5.42V48.93H47.66v-4.7l-.86.27-1.9-5.37a74.24,74.24,0,0,0,16-6.14H46.67V27.84H82.75V33H70c-1.15.9-2,1.56-2.67,2v7.64H62.11V38.18a84.41,84.41,0,0,1-13.5,5.73H81.53v5H67.71v2.93H79.45v5H67.71Zm1.54-25.88c1.92.45,4.38,1.15,7.36,2.1S82,38,83.92,38.77l-1.26,4.92c-2-.81-4.46-1.72-7.41-2.71s-5.45-1.76-7.49-2.3Z" />
。。。。。。

②加入动态特效的代码

我这里特效代码如下

            .cycyfun {
                fill: #3fa9f5;

            }

            .cycyfun path {
                stroke-dasharray: var(--len);
                stroke-dashoffset: var(--len);
                animation: stroke-animation 3s ease-in-out forwards, text-float 5s ease-in-out infinite;
                animation-delay: var(--wait)
            }

            .a1 {
                opacity: .1;
                --wait: .2s
            }
。。。。。。

然后在a1后面增加一样的a2 --wait: .4s 就这样.0.2递增

特别要注意的是在<path class="a1"上一行加上<g class="cycyfun">，在</svg>上面一行加上</g>否则动画无效。

三、最终效果如下（可以另存为来学习）

又学了一项技能，感觉又有好玩的了！