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