Html
    Css
    Js

    
                        
.box {
	width:300px;
	height:200px;
	padding:1px;
	background-size:10px 10px;
	background-image:-ms-linear-gradient(-45deg,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
	background-image:-moz-linear-gradient(-45deg,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
	background-image:-webkit-linear-gradient(-45deg,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
	background-image:linear-gradient(-45deg,rgba(0,0,0,1) 25%,rgba(0,0,0,0) 25%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%,rgba(0,0,0,0));
	-ms-animation:zi-antBorder 0.8s linear 0s infinite normal;
	-moz-animation:zi-antBorder 0.8s linear 0s infinite normal;
	-webkit-animation:zi-antBorder 0.8s linear 0s infinite normal;
	animation:zi-antBorder 0.8s linear 0s infinite normal;
}
@keyframes zi-antBorder {
	0% {
	background-position:0px 0px;
}
50% {
	background-position:0px 5px;
}
100% {
	background-position:0px 10px;
}
}.box>.inner {
	width:100%;
	height:100%;
	background:#fff;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS实现蚂蚁边框线(IE10+)

0