一般来说都是SVG
动画,可以用CSS
触发,也可以用JS
实现,就看你们的喜好。
主要还是UI需要在绘制图标的时候就要考虑这样的场景,所以最终导出的是一个矢量的SVG
,里面会有各种 path
和 circle
元素,并不只是引入一个图片文件就好了的,一般都是使用 AI
(Adobe illustrator
)来绘制。
其实也可以考虑 APNG
,相对来说会好实现很多。
8 回答4.6k 阅读✓ 已解决
6 回答3.3k 阅读✓ 已解决
5 回答2.8k 阅读✓ 已解决
5 回答6.3k 阅读✓ 已解决
4 回答2.2k 阅读✓ 已解决
4 回答2.7k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
主要是 stroke-dashoffset 这个 CSS 属性。
北大这个,这里是用 vivus 去修改 CSS 来实现的。
也可以参考下面这个视频,也是使用的 stroke-dashoffset,不过他是使用 CSS 的动画去实现的,没有借助 JS。
https://www.bilibili.com/vide...
配套代码:
https://codepen.io/stevenlei/...