Nexmoe 主题是一个用 MDUI 框架做的主题,用的图标理所当然是自带的 Material 图标。
『人类总是喜新厌旧的』 —— 某著名心理学家如是说
著名心理学家是谁不重要,有没有说过这句话更不重要。重要的是 Material 图标看久了难免会有些审美疲劳。于是最近利用空闲时间制作了一些带小动画的 SVG 图标,计划逐步替换掉现在使用的静态图标。
没看清楚?没关系,Gif 动画跟代码都已经放在了 Github 里面,直接 Ctrl + C ,Ctrl + V 就好了。
如果想要把这些 SVG 放到您的网站里面,建议把 SVG 的 width 跟 height 的大小设置成大于 30 ,不然边框会有点看不清。当然你也可以把 stroke-width 改得大一点。
有些帅气的同学可能会问:那想自己做一个会动的图标呢?
先在 Figma 里面画一个图标,导出为 SVG。然后给要加动画的 SVG 元素添加一个 <animate> 就好了。
当然,如果你实在是不想要自己画图标的话,可以在 这里 找到想要的图标。
非常简单是吧,其实和 CSS 动画的原理类似。如果想为元素添加 Transform 动画,可以使用以下代码:
比如,我们可以轻松制作一个带描边动画的圆圈:
[!NOTE] 需要注意的一点是: SVG 的
transform-origin: center在苹果系统中会有点问题。( It has no effect on transformations applied using the transform SVG attribute),目前好像没有什么好用的解决办法。
现在,可以在顶部弹出的 SnackBar 中、评论人机验证成功时,以及评论框检测到敏感词(在评论框输入『包单』并点击提交按钮)时,看到替换后的动画效果。人机验证为了正常显示动画 SVG 又做了一点点逻辑修改,这次肯定没有写出 BUG !(大声 BB