css 和 svg 實現螞蟻行軍效果

當對框進行選中操作的時候，我們經常使用的是對邊框換個顏色高亮顯示。但是當框很多的時候，換個顏色還是不夠顯眼，那麼這時候就該進行些sao操作了~

上面的效果就是我們經常說到的“螞蟻行軍”效果，廢話不多說，直接上可執行代碼

CSS實現

<div class="active"></div>
.active{
    border: 1px solid transparent;
    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%;
  }
}

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;
  }
}