效果

下面用 CSS 动画实现元素边框的进入/退出特效，鼠标移入时从左上角开始展示边框，移出时边框消失。

实现

众所周知，CSS 目前暂时没有办法操作边框长度，我们可以利用两个伪元素来实现这一点。元素本体使用position: relative;协助伪元素定位。

html
<div class="box">我是内容喵</div>

css
.box {
  --border-border: 2px;
  --color: rgb(14, 190, 225);
  --duration: 0.5s;
  border: 2px solid transparent;
  position: relative;
  color: var(--color);
  height: 36px;
  width: auto;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  text-align: center;
  box-sizing: border-box;
  background-color: black;
}

伪元素::before和::after使用绝对定位，鼠标移出时宽高为 0，边框透明：

css
.box::before, .box::after {
  content: "";
  position: absolute;
  margin-top: calc(0px - var(--border-border));
  margin-left: calc(0px - var(--border-border));
  width: 0px;
  height: 0px;
  box-sizing: border-box;
  border-style: solid;
  font-size: 0;
  top: 0;
  left: 0;
  border-color: transparent;
  border-width: var(--border-border);
}

鼠标移入时，展示对应的边框颜色，这里::before操纵上右的边框，::after操作左下的，然后宽高延申覆盖元素本体：

css
.box:hover::before {
  width: calc(100% + 2 * var(--border-border));
  height: calc(100% + 2 * var(--border-border));
  border-top-color: var(--color);
  border-right-color: var(--color);
  transition: width calc(var(--duration) / 2) linear,
    height calc(var(--duration) / 2) calc(var(--duration) / 2) linear,
    border-right-color 0s calc(var(--duration) / 2),
}
.box:hover::after {
  width: calc(100% + 2 * var(--border-border));
  height: calc(100% + 2 * var(--border-border));
  border-bottom-color: var(--color);
  border-left-color: var(--color);
  transition: width calc(var(--duration) / 2) calc(var(--duration) / 2) linear,
    height calc(var(--duration) / 2) linear,
    border-bottom-color 0s calc(var(--duration) / 2);
}

这时候，你可能会发现，两个伪元素边框交界处有一点是没有颜色的，这样子我们可以把其中一个伪元素，在适合的时候，加上剩余的两个方向的边框：

css
.box:hover::before {
  width: calc(100% + 2 * var(--border-border));
  height: calc(100% + 2 * var(--border-border));
  border-top-color: var(--color);
  border-right-color: var(--color);
  border-left-color: var(--color);
  border-bottom-color: var(--color);
  transition: width calc(var(--duration) / 2) linear,
    height calc(var(--duration) / 2) calc(var(--duration) / 2) linear,
    border-right-color 0s calc(var(--duration) / 2),
    border-bottom-color 0s var(--duration);
}

然后鼠标移出，边框消失，以::before为例，边框出现是先上后右的，我们需要写一个新的transition操作退出的动画，否则退出时也先上后右，太怪了。

css
.box::before {
  transition: width calc(var(--duration) / 2) calc(var(--duration) / 2) linear,
    height calc(var(--duration) / 2) linear,
    border-top-color 0s calc(var(--duration)),
    border-right-color 0s calc(var(--duration) / 2);
}
.box::after {
  transition: width calc(var(--duration) / 2) linear,
    height calc(var(--duration) / 2) calc(var(--duration) / 2) linear,
    border-left-color 0s calc(var(--duration)),
    border-bottom-color 0s calc(var(--duration) / 2);
}

嗯~~~就这样，边框动画就做好了。

更多的动画

同理，可以实现更多类似的动画：