html - 动画边框底部长度从 0 到 100

Question

我需要在不使用 :before 或 :after 或修改当前 html 结构的情况下使用关键帧动画为 div 的边框底部设置动画

div{
    padding:3px 6px;
    display:inline-block;
    position:relative;
    border-bottom: 2px solid black;
}

<div><h1>Lorem Ipsum</h1></div>

Answer 1

你可以像下面这样模拟它。希望对您有所帮助。

.container {
  padding: 3px 6px;
  display: inline-flex;
  flex-direction: column;
}

.underline {
  height: 2px;
  max-width: 0%;
  background-color: black;
  animation: drawBorder 2s ease forwards;
}

@keyframes drawBorder {
  from {
    max-width: 0%;
  }
  to {
    max-width: 100%;
  }
}

<div class="container">
  <h1>Lorem Ipsum</h1>
  <div class="underline"></div>
</div>