炫酷的css边框围绕代码

炫酷的 css 边框围绕效果

HTML 代码：

<div class="rabut">
    <a href="###">炫酷边框特效</a>
</div>

CSS 代码：

/* 修改宽高调整盒子大小 */     
body {
    background-color:black;
}
.rabut {
    width:200px;
    height:50px;
    color:#69ca62;
    /* 外面围绕的边框是真边框，眼睛看见的边框是阴影效果 */
    box-shadow:inset 0 0 0 1px rgba(105,202,98,0.5);
    background-color:#0f222b;
}
.rabut {
    text-align:center;
    margin:100px auto;
}
.rabut,.rabut::before,.rabut::after {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.rabut::before,.rabut::after {
    content:'';
    margin:-5%;
    box-shadow:inset 0 0 0 2px;
    animation:clipMe 8s linear infinite;
}
.rabut::before {
    animation-delay:-4s;
}
.rabut:hover::after,.rabut:hover::before {
    background-color:rgba(255,0,0,0.3);
}
/* 核心：更改宽高后这下面的动画效果也需修改 */
@keyframes clipMe {
    0%,100% {
         /* 上 右 下  左*/
         /* 上-下=-2px，右-右=220px 显示盒子上边框 */
         clip:rect(0px,220.0px,2px,0px);
    }
    25% {
         /* 上-下=-70px，右-右=2px 显示盒子左边框 */
         clip:rect(0px,2px,70.0px,0px);
    }
    50% {
        /* 上-下=-2px，右-右=220px 显示盒子下边框 */
        clip:rect(68.0px,220.0px,70.0px,0px);
    }
    75% {
        /* 上-下=-70px，右-右=2px 显示盒子右边框 */
        clip:rect(0px,220.0px,70.0px,218.0px);
    }
}
.rabut a {
    font-size:20px;
    line-height:50px;
    text-decoration:none;
    color:#404d5b;
}