“蚂蚁行军”和彩色边框设计

这里展示两种边框效果，一种是“蚂蚁行军”的动态边框效果，当然，截图中是看不出来动效的，读者需要自己动手运行才能看到效果；另一种是类似老式信封边框一样的彩色边框效果，这个效果在实际开发用到的可能性相对“蚂蚁行军”来说要高一些，有些开发者会采用图片背景的方式来实现这种效果，这里笔者直接用css来实现。

<div class="div1">
    蚂蚁行军边框效果
</div>
<div class="div2">
    彩色边框效果
</div>

来两个简单的div标签

.div1{
    padding: 1em;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg,black 0,black 25%,white 0,white 50%) 0 / .6em .6em;
    animation: ants 12s linear infinite;
}
@keyframes ants{
    to{background-position: 100%;}
}
.div2{
    padding: 1em;
    border: 16px solid transparent;
    border-image: 16 repeating-linear-gradient(-45deg,red 0,red 1em,transparent 0,transparent 2em,#58a 0,#58a 3em,transparent 0,transparent 4em);
}

上面是上面两种效果的css样式，读者直接粘贴成html文件，并运行就可查看效果，相信会让你惊喜一番。