炫酷的css边框围绕代码

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

 

 

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 炫酷的css边框围绕代码

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们