Question

我想在悬停时特别设置边框左侧和边框顶部的两个边框。在做了一些研究后，似乎你实际上并没有＃34; animate＆＃34;边界本身，所以你必须创建一个＆＃34;线＆＃34;悬停时应将其宽度设置为100％以产生相同的效果。

我知道如何使用下划线菜单项来执行此操作，但我想使用此框我尝试创建。特别是在悬停时（同时保持已经写入的CSS效果）

1）border-left应该在那之后延伸到顶部和右边 - > 2）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>

悬停时框的边框（边框左侧，边框顶部）的动画

1 个答案: