Html
    Css
    Js

    
                        
body {
	background-color:#333333;
}
#box,#content {
	width:200px;
	height:200px;
	position:relative;
	background-color:#333;
	overflow:hidden;
}
#box:before {
	content:"";
	position:absolute;
	width:200%;
	height:1px;
	top:0;
	transform:translateX(-100%);
	z-index:3;
	background:-webkit-repeating-linear-gradient(0deg,yellow 0,yellow 3px,rgba(0,0,0,0) 3px,rgba(0,0,0,0) 6px);
	animation:out-right linear 16s infinite;
}
#box:after {
	content:"";
	position:absolute;
	width:200%;
	height:1px;
	bottom:0;
	z-index:3;
	background:-webkit-repeating-linear-gradient(0deg,yellow 0,yellow 3px,rgba(0,0,0,0) 3px,rgba(0,0,0,0) 6px);
	animation:out-left linear 16s infinite;
}
@-webkit-keyframes out-right {
	from {
	transform:translateX(-50%);
}
to {
	transform:translateX(0);
}
}@-webkit-keyframes out-left {
	from {
	transform:translateX(0);
}
to {
	transform:translateX(-50%);
}
}#content:before {
	content:"";
	position:absolute;
	height:200%;
	width:1px;
	right:0;
	top:0;
	transform:translateY(-50%);
	z-index:3;
	background:-webkit-repeating-linear-gradient(90deg,yellow 0,yellow 3px,rgba(0,0,0,0) 3px,rgba(0,0,0,0) 6px);
	animation:out-down linear 16s infinite;
}
#content:after {
	content:"";
	position:absolute;
	height:200%;
	width:1px;
	left:0;
	z-index:3;
	background:-webkit-repeating-linear-gradient(90deg,yellow 0,yellow 3px,rgba(0,0,0,0) 3px,rgba(0,0,0,0) 6px);
	animation:out-up linear 16s infinite;
}
@-webkit-keyframes out-down {
	from {
	transform:translateY(-50%);
}
to {
	transform:translateY(0);
}
}@-webkit-keyframes out-up {
	from {
	transform:translateY(0);
}
to {
	transform:translateY(-50%);
}
}

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

css3 流动的边框

可根据代码自行调整

0