模仿北京健康寶動畫

北京健康寶有一個動畫，一圈小球，沿着正方形順時針滾動，並且顏色是漸變的，像下圖的這樣

提取出以下關鍵信息：

1. 小球沿着矩形順時針連續滾動，小球的間距是均勻的
2. 小球在矩形直角的時候會沿着直角滾動，過渡順滑
3. 小球的顏色有一些漸變，並且會隨着小球的位置而改變，左上角的一直都是深色的，右下一直是淺色的

邊框實現

想模仿實現這個動畫，最先想到的是使用邊框，想使用虛線邊框實現，找到了一個相似的

源碼

主要邏輯：

1. 把邊框設置成小球狀（dotted）
2. 製作 4 個邊框
3. 利用動畫，讓 4 個邊框沿着不同方向位移，模仿持續的的滾動

仔細觀察，發現一個比較嚴重的問題，在 4 個直角的過渡有問題，而且沒有辦法修復；拿右上角舉例，兩個滾動的邊框沒有辦法完美的融合在一起，從左到右的球和從上到下的球會相遇，和想要的從左->下的滾動不一樣

背景滾動

後來又發現一個滾動，這次是利用背景做持續的滾動，如下所示：

1. background 定義 4 條邊的方向和顏色
2. background-repeat 定義只能沿着邊進行滾動
3. background-size 定義邊的長和寬
4. background-position 定義邊的起點
5. 最後分別給 4 個背景製作動畫，讓其滾動起來

源碼

這個差距較大，連小球都完不成，放棄

滾動 SVG

這個就牛了，一看差不多啊：

源碼

1. 首先準備一個自己會滾動的 svg 圖片
2. 想辦法把小 svg 的邊拼接到大的矩形上

由於 svg 是自己滾動的，所以邊角的滾動非常的自然非常順滑，但是後來發現有一下無法完成：

1. 會滾動的小球 svg 怎麼製作
2. 如果是同一個小 SVG 拼成大的的話，小球的漸變色搞不定

SVG 動畫

源碼

這個方案，有意思：

1. 在 svg 裏面放一個矩形
2. 矩形的邊框設置為虛線（stroke-dasharray）
3. 虛線的缺口處設置為半圓（round）
4. 使用 css 控制偏移，使邊框滾動起來

目前的問題有：

1. 搞個漸變色的小球
2. 直角需要優化，左上角的會發生小球重合的情況

完美滾動的小球

接下來我去掉了圓角（rx），出現了問題，在左上角小球會融合和閃爍，經過多次實驗發現，我的邊長和 stroke-dasharray 需要配合好，才可以完美的把小球圍城正好一圈，這樣才不會在頭尾銜接處（左上角）發生聚集和閃爍，如下圖：

小球的顏色也找到了方法，使用 linearGradient 即可：

最後加上 CSS 動畫就可以實現一直滾動了：

源碼

對 SVG 很不熟，有更好的方法，歡迎討論