北大官网首页动态图标怎么做出来？

Question

https://www.youku.com/video/X...

Answer 1

主要是 stroke-dashoffset 这个 CSS 属性。

北大这个，这里是用 vivus 去修改 CSS 来实现的。

也可以参考下面这个视频，也是使用的 stroke-dashoffset，不过他是使用 CSS 的动画去实现的，没有借助 JS。

https://www.bilibili.com/vide...

配套代码：

https://codepen.io/stevenlei/...

Answer 2

https://codepen.io/mellis84/p...

https://github.com/juliangarn...

Answer 3

有没有可能它悬浮的的时候换成了动图gif格式

Answer 4

一般来说都是SVG动画，可以用CSS触发，也可以用JS实现，就看你们的喜好。

主要还是UI需要在绘制图标的时候就要考虑这样的场景，所以最终导出的是一个矢量的SVG，里面会有各种 path 和 circle 元素，并不只是引入一个图片文件就好了的，一般都是使用 AI(Adobe illustrator)来绘制。
其实也可以考虑 APNG，相对来说会好实现很多。

Answer 5

如果图标是用svg画的 可以用svg的 stroke-dashoffset 用动画改变这个值 即可实现