0

我知道有一种方法可以用线性梯度来做蚂蚁，但它会消耗大量的 CPU（每个大约 10%）。我正在尝试制作替代解决方案，但发现border-image-slice令人困惑。

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

我已经删除了过时的 css，但我不确定如何分割图像以便蚂蚁在行进。该图说：

我们将从一个 10px x 10px 的动画 gif 开始，它由九个图块组成：角落为 1×1，边缘为 1×8 或 8×1，中心为 8×8。

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>

谢谢

4

3 回答 3

2

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

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>

于 2017-01-29T21:56:30.080 回答
2

这是我找到的 CSS 版本，在 CPU 使用率方面与其他版本相比如何？

body { background: green; }
.box {
  position: relative;
  width: 90px;
  height: 90px;
  overflow: hidden;
  margin: 10px;
  background: black;
}
.box * {
  position: absolute;
}
.box div {
  width: 100%;
  height: 100%;
}
.box div:nth-child(1) { transform: rotate(   0deg ); }
.box div:nth-child(2) { transform: rotate(  90deg ); }
.box div:nth-child(3) { transform: rotate( 180deg ); }
.box div:nth-child(4) { transform: rotate( 270deg ); }
.box i {
  left: 0;
  top: 0;
  width: 200%;
  border-bottom: 1px dashed white;
}
.box i {
  animation: marching 4s infinite linear;
}
@keyframes marching {
  from { transform: translateX( -50% ); }
  to   { transform: translateX(   0% ); }
}
<div class="box">
  <div><i></i></div>
  <div><i></i></div>
  <div><i></i></div>
  <div><i></i></div>
</div>

来源：https ://jsfiddle.net/desandro/zm7Et/

于 2017-01-29T22:36:32.610 回答
1

你有什么理由不使用画布吗？

Canvas 元素有一个 lineDashOffset 属性，通常用于行进蚂蚁效果：
https ://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

如果您打算使用 GIF，看起来好像缩放不是您担心的事情，所以也许画布可能是更好的方法。缓冲区画布也可用于提高性能。

于 2017-01-29T22:04:22.080 回答