css - 使用 GIF 移动 Ant 边界

Question

我知道有一种方法可以让 Ant 行进时使用线性渐变，但它会占用大量 CPU(每个大约 10%)。我正在尝试制作替代解决方案，但发现 border-image-slice 令人困惑。

这是我正在使用的过时教程:http://www.chrisdanford.com/blog/2014/04/28/marching-ants-animated-selection-rectangle-in-css/

我已经删除了过时的 css，但我不确定如何切割图像以便 Ant 在行进。图说:

We’ll start with a 10px x 10px animated gif that is composed of nine tiles: 1×1 in the corners, 1×8 or 8×1 on the edges, and 8×8 in the center.

body {
  background-color: green;
}

.box {
  width: 200px;
  height: 200px;
  background-color: black;
}

.marching {
  border: 1px solid transparent;
  border-image-source: url('https://i.imgsafe.org/e5bc19b03a.gif');
  border-image-slice: 1;
  border-image-repeat: stretch stretch;
}

<div class="box marching"></div>

谢谢

Answer 1

背景应该重复，而不是拉伸(stretch)。这就是你想要的吗？

body {
  background-color: green;
}

.box {
  width: 200px;
  height: 200px;
  background-color: black;
}

.marching {
  border: 1px solid transparent;
  border-image-source: url('https://i.imgsafe.org/e5bc19b03a.gif');
  border-image-slice: 1;
  border-image-repeat: repeat repeat;
}

<div class="box marching"></div>