Marching ants border

dabblet.css

/**
 * Marching ants border
 */
 
.wrapper{
	border: 1PX solid rgba(0,0,0,0);
	background-image: linear-gradient(#fff, #fff), repeating-linear-gradient(-45deg, #000 0, #000 12.5%, transparent 0, transparent 25%, #000 0, #000 37.5%, transparent 0,transparent 50%);
	background-clip:padding-box, border-box;
	background-size:1em 1em;
	width:700px;
	height:300px;
	box-sizing:border-box;
	padding: 1em;
	animation: ants 20s linear infinite;
}

@keyframes ants {
	to { background-position: 100% 100%; }
}

dabblet.html

<div class="wrapper"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}