共计 971 个字符，预计需要花费 3 分钟才能阅读完成。
模拟北京衰弱宝动画
北京衰弱宝有一个动画，一圈小球，沿着正方形顺时针滚动，并且色彩是突变的，像下图的这样
提取出以下要害信息：
- 小球沿着矩形顺时针间断滚动，小球的间距是平均的
- 小球在矩形直角的时候会沿着直角滚动，过渡顺滑
- 小球的色彩有一些突变，并且会随着小球的地位而扭转，左上角的始终都是深色的，右下始终是浅色的
边框实现
想模拟实现这个动画，最先想到的是应用边框，想应用虚线边框实现，找到了一个类似的
源码
次要逻辑：
- 把边框设置成小球状（dotted）
- 制作 4 个边框
- 利用动画，让 4 个边框沿着不同方向位移，模拟继续的的滚动
仔细观察，发现一个比较严重的问题，在 4 个直角的过渡有问题，而且没有方法修复；拿右上角举例，两个滚动的边框没有方法完满的交融在一起，从左到右的球和从上到下的球会相遇，和想要的从左 -> 下的滚动不一样
背景滚动
起初又发现一个滚动，这次是利用背景做继续的滚动，如下所示：
- 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 很不熟，有更好的办法，欢送探讨
正文完
