这是一套非常邪道的制作流程，应用于不想在 css 里引用外部资源的场合。

首先，打开 draw.io （现在似乎改名了）并制作动画的第一帧。给动画添加一个背景（便于控制位置）。做完后，复制全套并移到下面开始做第二帧。以此类推把整个动画做完。

然后，分别选中每一帧并导出为 svg，记得裁剪且不要包含图的副本。

做完这一步后，用 URL-encoder for SVG 转换成可以直接贴入 css background-image 属性的代码，也就是说给里面某些字符转义。

最后，贴入 css @keyframes 中。

注意事项

  • 有的 sass 编译器会报错，原因是把 svg 内部的 css 分号识别成了语句分隔符，从而换行。解决方法是把分号也转义。
  • draw.io 制作出来的 svg 动画大概率需要修改尺寸。