仿北京健康宝的动画北京健康宝有一个动画，一圈小球，沿着正方形顺时针滚动，颜色是渐变的，提取如下关键信息如下图：rectangle，球之间的距离是均匀的，当矩形成直角时，球会沿着直角滚动，过渡平滑。球的颜色有一些渐变，会随着球的位置而变化。颜色，右下始终是浅色边框。我想模仿并实现这个动画。我首先想到的是使用边框。我想用虚线边框来实现。我找到了类似的源代码。主要逻辑：把边框设置成一个小球（虚线）做4个边框，用动画把4个边框往不同的方向移动，模仿连续滚动仔细观察，发现一个比较严重的问题。4个直角过渡有问题，没办法修复；以右上角为例，两个滚动边框无法完美融合，从左到右的球和从上到下的球会相遇，这与我们想要的从左滚动不同->bottom，这次使用背景进行连续滚动，如下图：background定义4条边的方向和颜色background-repeat定义只沿边滚动background-size定义边的长和宽background-position定义在起点的最后，为4个背景制作动画并让它们滚动。源码差距很大，连小球都完成不了。放弃滚动SVG真是太棒了。乍一看都差不多：源码先准备了一张可以自己滚动的svg图片。找到一种将小svg的边缝合到大矩形的方法。由于svg是自己滚动的，所以边角的滚动是非常自然流畅的，但是后来发现有一件事情是做不到的：如何制作一个可以滚动的小球svg如果是如果是同一个小SVG组合成一个大的，球的渐变色可能无法处理SVG动画源码。这个方案很有意思：在svg中放一个矩形，设置矩形的边框为虚线（stroke-dasharray），虚线的间隙设置为半圆（round），用css控制偏移量，使边框卷起。目前存在的问题是：需要优化渐变色小球的直角，左上角的小球会重叠。完美滚动的球接下来，我去掉了圆角（rx），有一个问题，球会融合并在左上角闪烁。经过多次实验，我发现我的边长和stroke-dasharray需要配合好，才能让小球完美的绕城，才不会在头尾交界处（左上角）出现聚拢和闪烁，如下图：小球的颜色也找到了方法，使用linearGradiEnt就够了：最后加CSS动画实现连续滚动：源码对SVG很陌生，有更好的办法，欢迎讨论
