前言 最近做了一个小需求，记得之前写过这个美团购物车小球动画效果还发在csdn里面了，但需要的时候却找不到，不知道什么时候给删了，今天再给大家分享一下这个功能的源码，以便以后的使用。

手把手使用 SVG + CSS 实现渐变进度环效果，利用的就是 SVG 的 stroke-dasharray。

思来想去最终我决定自己也尝试做一个学习卡盒工具，这种轻量化的工具很适合做成小程序，恰好我也很熟悉做小程序，难得有个有用有趣的点子，就开始整理需求了...

在刷抖音的时候，发现有一个直播的专属导航页签，切换到这个页签之后，刷出来的内容全都是直播，不过都是在“门外”观看，没有进入直播间； 短暂的停留之后，会出现一个自动进入直播间的提示，并且有一个描边动画，

想要实现一个可以展开收起的效果并不难，直接用`display: none;`就能完成，但这种方法并不能实现过渡动画效果，想要实现过渡效果必须是属性值的变化，比如`height`从0到自身最大高度，除了