【CSS】蚂蚁行军边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【CSS】蚂蚁行军边框</title> <style> .container { width : 100%; } @keyframes ants { to { background-position: 100% 100% }} .marching-ants { padding: 1em; border : 1px solid transparent; background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em; animation: ants 12s linear infinite; } </style> </head> <body> <div class="container"> <div class="marching-ants">三十客</div> </div> </body> </html>