css3 下边框缓缓划过_css3 流动的边框

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%);

}

}