自我介绍 本猫生活在东北的一个四线小城市，目前在一家小单位任职前端工程师的职位。早八晚五，生活充实，好不快活！ 噩耗 Ctrl+c,Ctrl+v。Ctrl+c,Ctrl+v。新的一天开始了，本猫正在努

CSS动画：利用css3的样式效果可以将dom元素做出动画的效果来。 Canvas动画：利用Canvas提供的API，不断清除--绘制这样一帧一帧的做出动画效果。 SVG动画：SVG意为可缩放矢量图形，同时也是HTML中的一个标签，在实现动画方面较为小众了一些，但其提供了不少的…

这次项目用到了一些自定义的数据可视化组件，我把我做的部分抽出来几个典型做个汇总。 有些图片（例如下面这个jpg动图）太大，进行了一定程度的压缩，有点模糊（＾_＾）。 改进版：大小和亮暗用gap控制，近大远小，近亮远暗。 这篇文章画的是angle一个纬度，只要再增加另外一个纬度r…

SVG 的应用十分广泛，得益于 SVG 强大的各种特性。 利用 URL.createObjectURL(svg) 取出 URL。 由于微信编辑器不允许嵌入 <style><script><a> 标签，利用SVG SMIL 可进行微信公众号极具创意的图文排版设计，包括动画与交互。…

上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后，很多朋友找我讨论，感叹 CSS 的奇妙。 将下面这个动画的下划线效果，从左进入，右边离开修改为从上方进入，下方离开。 第一眼看到这个效果，我的内心毫无波澜。以为只是简单的一个下划线 hover 效果，经过友人提…

move1是父元素蒙版的，movetwo是黄色svg图形的，请不要吐槽起名。。。。

stroke-dasharray：控制用来描边的点划线的图案范式。 这里可以传入以空格代表分隔的数组：可以传入任意数量的数字，代表了分割的规律。比如： stroke-dashoffset：用于指定 stroke-dasharray 开始的偏移量，这也是动画的原理的关键。 通过控…