html - 悬停时框的动画边框(border-left，border-top)

Question

我想在悬停时为两个边框制作动画，特别是 border-left 和 border-top。在做了一些研究之后，您似乎无法真正“动画化”边框本身，因此您必须创建一条“线”，在悬停时应将其宽度设置为 100% 以产生相同的效果。

我知道如何用带下划线的菜单项来做到这一点，但我想用我试图创建的这个框来做到这一点。特别是悬停(同时保持已经写好的 css 效果)

1) border-left 应该延伸到顶部和右边-> 2) border-top 从左边延伸到右边。

我还想知道如果我不想只做 border-left 或 border-top，我该如何选择要扩展的边框。

到目前为止，这是我的盒子(不幸的是没有动画边框):

CSS:

#txt{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:2vw;
}
#box{
    position:fixed;
    top:25%;
    left:25%;
    height:20vw;
    width:20vw;
    border-right: 2px solid deepskyblue;
    border-bottom: 2px solid deepskyblue;
    background-color:black;
    color:ghostwhite;
}
#box:hover{
    color:deepskyblue;
    transition: color 0.25s ease;
}
#box:after{
    content:"";
    position:absolute;
    bottom: 0;
    left: 0;
    width:100%;
    height:100%;
    transform: scale(0, 0);
    transform-origin:bottom right;
    background: ghostwhite;
    z-index: -1;
    transition: transform 0.25s ease;
}
#box:hover::after{
    transform: scale(1, 1);
    color:deepskyblue;
}

HTML:

<div id="box">
<span id="txt">TEXT</span>
</div>

Answer 1

您可以使 #txt 元素与父框一样大，然后在其上使用伪元素来制作“边框”并为这些伪元素的尺寸设置动画。

如果你添加一个 transiton-delay 我想你可以得到你想要的效果。

#txt {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#box {
  font-size: 2vw;
  position: fixed;
  top: 1em;
  left: 40vw;
  height: 20vw;
  width: 20vw;
  background-color: black;
  color: ghostwhite;
}

#box:hover {
  color: deepskyblue;
  transition: color 0.25s ease;
}

#box:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0, 0);
  transform-origin: bottom right;
  background: ghostwhite;
  z-index: -1;
  transition: transform 0.25s ease;
}

#box:hover::after {
  transform: scale(1, 1);
  color: deepskyblue;
}

#txt::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  height: 0;
}

#txt::before {
  width: 0;
  border-left: 2px solid deepskyblue;
  transition: height .25s .5s ease;
}

#txt:hover::before {
  height: 100%;
}

#txt::after {
  content: "";
  position: absolute;
  width: 0%;
  top: 0;
  left: 0;
  border-top: 2px solid deepskyblue;
  transition: width 0.25s .75s ease;
}

#txt:hover::after {
  width: 100%;
}

<div id="box">
  <span id="txt">TEXT</span>
</div>