详解CSS实现蚂蚁行军边框效果

蚂蚁行军边框截图如下，实际效果是虚线边框会动态滚动，就像一排蚂蚁在前进一样。那么它是怎么实现的呢？

效果图

先上代码：
HTML：

CSS：

.container {
        width: 100px;
        height: 100px;
        border: 1px solid transparent;
        background: linear-gradient(white, white) padding-box,
                    repeating-linear-gradient(-45deg, black 0, black, 25%, transparent 0, transparent 50%) 0% 0% / 0.6em 0.6em;
        animation: ants 10s linear infinite;
      }
@keyframes ants {
        to {
            background-position: 100% 100%;
        }
      }

首先要设置容器的边框宽度为1px，颜色要设置成透明，以便稍后设置的背景能够显示出来。

background使用了简写形式，其书写顺序为：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
可以设置多重背景，并用逗号隔开，设置在前面的总是会覆盖后面的。这里设置了两层背景，第一层背景使用线性渐变linear-gradient设置了从白色到白色的渐变，padding-box是background-clip属性的值，表示背景图片绘制在内边距方框内。其实就是绘制了一个白色的块，用来遮盖第二层背景的中间部分，保留边框部分。

第二层背景使用重复的线性渐变repeating-linear-gradient设置了黑白相间的条纹渐变，渐变方向倾斜45度角，以实现边框部分黑白相间的效果。这里用到的是bg-image position/bg-size这三个属性。即：

• background-image 这里用repeating-linear-gradient实现了
• background-position 背景图片的起始位置，默认为 0% 0%，此处取值0% 0%表示起始位置设为左上角
• background-size 设置背景图片的大小，用来适当缩小黑白条纹

静态效果算是做好了，接下来要设置动画来实现动态效果。animation设置动画的播放效果，书写顺序为：
animation: name duration timing-function delay iteration-count direction fill-mode play-state
这里使用了名为ants的动画，动画一次播放时间为10秒，线性效果，无限循环播放。

使用@keyframes后跟动画名来定义一个动画，通过逐步改变从一个CSS样式过渡到另一个。可以指定每个阶段的样式，0％是动画开始时的样式，100％是动画结束时的样式，也可以使用关键字"from"和"to"来指定开始和结束的动画样式。

本例中，要过渡的背景图片的位置从左上角（0% 0%）逐渐过渡到右下角（100% 100%），看起来的效果就像边框动起来了一样。