html部分
<div class="box_txt"></div>
css部分
@keyframes clipMe{
0%,100%{clip:rect(0,240px,2px,0)}
25%{clip:rect(0,2px,140px,0)}
50%{clip:rect(138px,240px,140px,0)}
75%{clip:rect(0,240px,140px,238px)}
}
@keyframes clipMe1{
0%,100%{clip:rect(138px,240px,140px,0)}
25%{clip:rect(0,240px,140px,238px)}
50%{clip:rect(0,240px,2px,0)}
75%{clip:rect(0,2px,140px,0)}
}
.box_txt{
width: 200px;
text-align: center;
line-height: 100px;
height: 100px;
position:relative;
z-index:3;
}
.box_txt::before{
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
border:1px solid #D19D46;
margin:-20px;
z-index:-1;
-webkit-animation:clipMe 8s linear infinite;
-o-animation:clipMe 8s linear infinite;
animation:clipMe 8s linear infinite;
}
.box_txt::after{
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
border:1px solid #D19D46;
margin:-20px;
z-index:-1;
-webkit-animation:clipMe 8s linear infinite;
-o-animation:clipMe 8s linear infinite;
animation:clipMe 8s linear infinite;
}
