子比官网同款动态Logo制作教程-zibll美化交流分享社区-zibll子比主题-WordPress主题模板-zibll子比主题

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

新教程已经在写了,制作更加简单,晚些更新

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

成品演示(子比官网无法上传svg):

 
海枫筑梦计划Logo(密码已经默认填好,点进去点“预览”).svg

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

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

20240707022936123-image-14

关于位置偏移问题:

二次编辑新增:CSS修改:

关于SVG的压缩(可选,没太大必要):

教程很长,大佬们请轻喷~

请登录后发表评论