css 和 svg 实现蚂蚁行军效果

当对框进行选中操作的时候，我们经常使用的是对边框换个颜色高亮显示。但是当框很多的时候，换个颜色还是不够显眼，那么这时候就该进行些sao操作了~

上面的效果就是我们经常说到的“蚂蚁行军”效果，废话不多说，直接上可执行代码

CSS3实现

这个方法来自《CSS揭秘》
<div class="active"></div>
.active{
    background-image: linear-gradient(white, white), 
                      repeating-linear-gradient(-45deg, red 0, red 25%, white 25%, white 50%);
    background-size: 20px 20px;
    background-clip: padding-box, border-box;
    background-position: 0;
    animation: ants 12s linear infinite;
}
@keyframes ants {
  to {
    background-position: 100%;
  }
}

1.19更新，在网上找到更适用的方法，记录一下，可以直接使用~

.active{
 background: linear-gradient(0deg, transparent 50%, red 50%) repeat-y,
    linear-gradient(0deg, transparent 50%, red 50%) repeat-y,
    linear-gradient(90deg, transparent 50%, red 50%) repeat-x,
    linear-gradient(90deg, transparent 50%, red 50%) repeat-x;
  background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: ants 0.5s infinite linear;
}

@keyframes ants {
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

SVG实现

.active{
    stroke-dasharray: 16;
    stroke-dashoffset: 500;
    animation: animation-dash 5s linear alternate infinite;
    fill-opacity: 0.2;
}

@keyframes animation-dash {
  to {
    stroke-dashoffset: 0;
  }
}