前言：为何特别注意按钮hover边框围绕效果？
那是long long age，我在某体育视频网站上游走，发现鼠标放在视频封面上的时候，有一条线从左上角迅速喷射出来，把视频封面围堵得严严实实，大喊一声：你已经被包围了，你有权保持沉默，但是你所说的每句话将成为呈堂证供，请放弃抵抗，赶紧投降！
好，真实效果类似于下面：
以前觉得还蛮神奇的，但是一直没有实际的应用场景，就懒得去研究了。
直到最近在很火的Visualization Collection上再次看到这个效果，就决定来好好分析一下实现原理。
原理分析
其实原理也非常简单，用慢速就可以大概理解：
- 将按钮的before元素定位在左上角，after元素定位在右下角，并同时设置以下样式：
button::before, button::after {
width: 0;
height: 0;
border: 2px solid transparent;
}
- 然后就是hover时的样式：
button:hover::before {
width: 100%;
height: 100%;
border-top-color: #35a2fd;
border-right-color: #35a2fd;
transition: width 2s ease-out, height 2s ease-out 2s;
}
从上面的transition的可以看到，在hover before伪元素时，先是执行完宽度（width）的过渡动画，再执行高度（height）的过渡动画，就产生了上边框从左到右出现，然后右边框从上到下出现的动画。同理，再执行hover的以下样式:
button:hover::after {
width: 100%;
height: 100%;
border-bottom-color: #35a2fd;
border-left-color: #35a2fd;
transition: border-color 0s ease-out 4s, width 2s ease-out 4s, height 2s ease-out 6s;
}
再从上面的transition的可以看到，在hover after伪元素时，先是执行完宽度（width）的过渡动画，再执行高度（height）的过渡动画，就产生了下边框从右到左出现，然后左边框从下到上出现的动画。
合起来就是一个完整的边框围绕按钮效果了！
不足
1、边框直线有突出物
效果就是这么简单的实现啦！但是总觉得哪里不对，放大一看：
我的天，这只小脚脚是啥？？？
没错，大家很聪明，一眼就看出来了！它就是右边框的遗色，给右边框换个颜色就很清楚了：
虽然在执行上边框动画时，before伪元素内容是没有高度的，但不代表这个元素是没有高度的，懂的都懂。
2、锯齿
由于使用了两个伪元素的边框组合成一个矩形，但是边框的边缘是有一个45度斜角的，这就会产生锯齿问题，如下:
左上、右下两个地方并不能完美的拼接在一起。这要是接骨，挥挥手不得散架。
改进
所以呢。。。嗯。。。虽然可能也许各位观众在浏览网页时可能大概也不太会注意到这些细节，但是作为一位爱钻研的前端开发者，怎么能容忍这些缺陷存在呢？不把自己卷死，又怎么对得起给我们启蒙的各位老师们呢？
既然显示了不该显示的右边框，那就让它不显示；既然边框边缘有斜角，那就让各位看不到斜角。添加以下代码：
button {
overflow: hidden;
}
button::before {
left: -2px;
}
button::after {
right: -2px;
}
button:hover::before {
transition: border-right-color 0s ease-out 2s, width 2s ease-out, height 2s ease-out 2s;
width: calc(100% + 2px);
}
button:hover::after {
transition: border-bottom-color 0s ease-out 4s, border-left-color 0s ease-out 6s, width 2s ease-out 4s, height 2s ease-out 6s;
width: calc(100% + 2px);
}
改进后的慢动作效果如下：
简直完美！！！完整代码如下：
<template>
<button>Button</button>
</template>
<style scoped lang="scss">
$dynamicButtonsWidth: 160px;
$dynamicButtonsHeight: 48px;
$buttonColor: #35a2fd;
button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: $dynamicButtonsWidth;
height: $dynamicButtonsHeight;
font-size: 24px;
color: $buttonColor;
background-color: transparent;
border: none;
cursor: pointer;
overflow: hidden;
&::before,
&::after {
content: "";
box-sizing: border-box;
position: absolute;
width: 0;
height: 0;
border: 2px solid transparent;
}
&::before {
top: 0;
left: -2px;
}
&::after {
bottom: 0;
right: -2px;
}
$duration: 0.2s;
&:hover::before {
width: calc(100% + 2px);
height: 100%;
border-top-color: $buttonColor;
border-right-color: $buttonColor;
transition: border-right-color 0s ease-out calc($duration / 4), width calc($duration / 4) ease-out,
height calc($duration / 4) ease-out calc($duration / 4);
}
&:hover::after {
width: calc(100% + 2px);
height: 100%;
border-bottom-color: $buttonColor;
border-left-color: $buttonColor;
transition: border-bottom-color 0s ease-out calc($duration / 2),
border-left-color 0s ease-out calc($duration / 4 * 3),
width calc($duration / 4) ease-out calc($duration / 2),
height calc($duration / 4) ease-out calc($duration / 4 * 3);
}
}
</style>
结语
抑郁症的人不是矫情。平时看起来没事儿总是笑，只是他们知道没有人能够真正理解他们，会陷入自我内耗中也不给别人添麻烦，因为知道没有意义。如果有一天Ta想对你倾诉，请不要置之不理或者随意说出“这才多大点事儿啊”等这种可能更会刺激和伤害他们的话。请多给他们一些关爱和耐心。
愿天堂没有伤痛， Coco姐，一路走好?️
大家好，才是真的好，广州好迪~
