这样高大上的顶部签名关注图，我抄袭了一个

除了不正常更新，其他都正常

大数据｜新媒体｜技术控｜为人低调

关 注

记得点一下关注看效果。

第一次看见时挺惊艳的，

除了得益于微信页面部分特性的开放，

让更多的代码特效添加进来，

更得益于有些设计师能大力开发脑洞，

做这样好玩的事情。

早在一个月前我就看见了，

就想起早前微博里gif的一种效果：

缩略图点击放大后变成另外的页面。

这个相信很多人都见过，

其远离是，做一个2帧gif图，

只设置播放一次，

缩略图会选择第一帧显示，

点击放大后播放会显示第二帧，

由于是播放一次，所以画面会停留在第2帧

由于画面播放速度极快，

所以我们看不出变化

于是，举一反三，

应该就是点开了一张动图。

结果当然是我太幼稚啦！！！

微信又不是微博，哪里会有缩略图呢。

所以，做gif实现这个效果，

根本行不通。

索性认真看作者教程，

这才发现又是SVG动画。

关注和底色其实是代码写的，

其背后隐藏了一张图片

所以点关注的时候，

会触发隐藏的图片，

正如我们在公号点击一个图片

会进入图片的单独页面一样

进入的这张图是个黑底的图片。

不仅是点“X”的时候，会消失，

其实点任何位置都会消失的。

这是微信里打开图片的规则。

所以，看起来特别高大上的东西

原理很简单

重要的不是原理本身，

而是对原理创造性的运用。

当然SVG代码教程，

作为小编的你值得拥有。

像我一样不想拥有SVG也没关系，

你可以用 某款排版插件 啊

能够很方便的让你搞定

这个高大上的顶部签名关注图。

对了，这个工具甚至可以导出公号数据到EXCEL！

为了避免广告嫌疑

（毕竟我这号小，广告掉粉伤不起啊）

可以后台直接留言问我。

「我所说的都是废话」