Css 使用GIF移动蚂蚁边界
我知道有一种方法可以让行进中的蚂蚁具有线性梯度，但它会消耗大量的CPU（每只蚂蚁大约10%）。我正试图制作一个alt解决方案，但发现Css 使用GIF移动蚂蚁边界,css,border-image,Css,Border Image,我知道有一种方法可以让行进中的蚂蚁具有线性梯度，但它会消耗大量的CPU（每只蚂蚁大约10%）。我正试图制作一个alt解决方案，但发现边框图像切片令人困惑 以下是我正在使用的过时教程： 我已经删除了过时的css，但我不知道如何分割图像，以便蚂蚁前进。图坦卡蒙说： 我们将从一个10px x 10px的动画gif开始，它由九个部分组成 瓷砖：墙角为1×1，边缘为1×8或8×1，墙角为8×8 中锋 正文{ 背景颜色：绿色； } .盒子{ 宽度：200px； 高度：200px； 背景色：黑色； } .行
边框图像切片正文{
背景颜色：绿色；
}
.盒子{
宽度：200px；
高度：200px；
背景色：黑色；
}
.行军{
边框：1px实心透明；
边框图像源：url（'https://i.imgsafe.org/e5bc19b03a.gif');
边界图像切片：1；
边界图像重复：拉伸；
}正文{
背景颜色：绿色；
}
.盒子{
宽度：200px；
高度：200px；
背景色：黑色；
}
.行军{
边框：1px实心透明；
边框图像源：url（'https://i.imgsafe.org/e5bc19b03a.gif');
边界图像切片：1；
边界图像重复：重复；
}正文{
背景颜色：绿色；
}
.盒子{
宽度：200px；
高度：200px；
背景色：黑色；
}
.行军{
边框：1px实心透明；
边框图像源：url（'https://i.imgsafe.org/e5bc19b03a.gif');
边界图像切片：1；
边界图像重复：重复；
}如果你打算使用GIF，看起来缩放并不是你担心的事情，所以画布可能是更好的方法。缓冲区画布也可以用来提高性能。有什么理由不使用画布吗 Canvas元素有一个lineDashOffset属性，该属性通常用于移动ant效果：
如果你打算使用GIF，看起来缩放并不是你担心的事情，所以画布可能是更好的方法。缓冲区扫描也可以用来提高性能。这是我找到的CSS版本，在CPU使用方面它和其他版本相比如何
body{背景：绿色；}
.盒子{
位置：相对位置；
宽度：90px；
高度：90px；
溢出：隐藏；
利润率：10px；
背景：黑色；
}
.方框*{
位置：绝对位置；
}
.包厢部{
宽度：100%；
身高：100%；
}
.box div:n个子（1）{变换：旋转（0度）；}
.box div:n个子（2）{变换：旋转（90度）；}
.box div:n个子（3）{变换：旋转（180度）；}
.box div:n个子（4）{变换：旋转（270度）；}
.方框一{
左：0；
排名：0；
宽度：200%；
边框底部：1px白色虚线；
}
.方框一{
动画：无限线性；
}
@关键帧行进{
来自{transform:translateX（-50%）；}
到{transform:translateX（0%）；}
}这是我找到的CSS版本，它和其他版本相比CPU使用率如何
body{背景：绿色；}
.盒子{
位置：相对位置；
宽度：90px；
高度：90px；
溢出：隐藏；
利润率：10px；
背景：黑色；
}
.方框*{
位置：绝对位置；
}
.包厢部{
宽度：100%；
身高：100%；
}
.box div:n个子（1）{变换：旋转（0度）；}
.box div:n个子（2）{变换：旋转（90度）；}
.box div:n个子（3）{变换：旋转（180度）；}
.box div:n个子（4）{变换：旋转（270度）；}
.方框一{
左：0；
排名：0；
宽度：200%；
边框底部：1px白色虚线；
}
.方框一{
动画：无限线性；
}
@关键帧行进{
来自{transform:translateX（-50%）；}
到{transform:translateX（0%）；}
}
。gif。gif