炫酷的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;
}

以上关于炫酷的css边框围绕代码的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。