2019-04-20 css实现文字环绕动画效果

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;
      }