css 实现酷炫的边框效果

1. 实现上下两个对角边框像里面闭合效果

原理

1. 利用before after 伪元素 配合border 可以控制不同位置边框宽度 定位生成外层需要动态的边框
2. 通过改变边框的宽度达到动态边框运动闭合效果
3. 利用transition 添加动态运动效果

效果

鼠标悬浮后效果

// html部分
<div class="box"></div>

// css部分
.box{
  width:120px;
  height:50px;
  border:1px solid red;
  margin:50px auto;
  position:relative;
}

.box:before，.box:after{
  content:"";
  position: absolute;
  width: 16px;
  height: 16px;
  transition:1s;
}

.box:before{
  top: -5px;
  left: -5px;
  border-top: 1px solid red;
  border-left: 1px solid red;
}

.box:after{
  bottom: -5px;
  right: -5px;
  border-bottom: 1px solid red;
  border-right: 1px solid red;
}

.box:hover:before,.box:hover:after{
  width:calc(100% + 9px);
  height:calc(100% + 9px);
}

2. 实现逆时针围绕边框动态上色按钮效果

原理：

1. 通过利用css延时控制边框宽高跟颜色出现时间顺序达到该效果
2. 利用before定位左边跟下边边框位置，首先执行高度变化为按钮高度，2s后将宽度定位100%，这样就实现了左下边框的运动动画
3. 利用after定位右边跟上边边框，等待before动画执行完成后，再相应延时执行右侧跟上侧边框动画

<div class="box"></div>

// CSS
.box{
  width:120px;
  height:50px;
  border:5px solid #ccc;
  margin:50px auto;
  position:relative;
}

.box:before{
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  top: -5px;
  left: -5px;
   border-left: 5px solid transparent;
  border-bottom: 5px solid transparent;
  
}

.box:after{
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -5px;
  right: -5px;
  border-top: 5px solid transparent;
  border-right: 5px solid transparent;
  
} 
.box:hover:before{
  border-left-color: red;
  border-bottom-color:red;
  transition: height .25s,width .25s;
  transition-delay: 0s, .25s;
}
.box:hover:after{
  border-top-color: red;
  border-right-color: red;
  transition: height .25s,width .25s,border-color .5s;
  transition-delay: .5s, .75s;
}
.box:hover:before,.box:hover:after{
 
  width:calc(100% + 5px);
  height:calc(100% + 5px);
  
}