子比官网同款动态Logo制作教程

前言

前段时间发现子比官网的这个Logo是动态的，“B”的上下两个形状分别展示，然后“ZIBLL”带有笔画地呈现出来。接下来教各位朋友如何复刻一个这样的Logo。我把这个Logo扒下来发现是SVG的，SVG相较于GIF有两个好处，一是远比GIF小，子比官网这个Logo不到10KB，而相同清晰度与流畅度的GIF绝对无法做到这么小；二是无损，SVG本身就是矢量图，无论放多大都不会出现一点锯齿。不过想要做这个要花费不少心思（或者说其实很简单但是我没找到更简单的方法），没耐心的朋友不用试了

你也可以用电脑进入子比官网，切换浅色和深色模式来查看。

需要自备一张SVG矢量Logo和Ai（adobe画矢量图那个），以及一个代码编辑器VS Code（其他的也行，推荐在里面装个SVG插件）