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%);
}
}
1135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
