本文主要是介绍css写蚂蚁行军边框,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
话不多说,直接上效果图
是不是看着很6,接下来,就上代码
为了代码的简洁,使用到了sass预处理器
<div class='marching-ants'></div>
@keyframes ants { to { background-position: 100% } }.marching-ants {margin-top: 20px;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;}
这篇关于css写蚂蚁行军边框的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!