如何在悬停时创建边框底部的动画扩展？

悬停效果：边框底部的动画扩展

在这个问题中，目标是创建一个悬停效果，在悬停时扩展元素的底部边框。为了实现这种效果，我们可以利用transform属性并在悬停时将其从0转换为1。

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}

这种方法使用伪元素将边框过渡与文本分开，保留原始HTML结构。可以操作transform-origin属性来从不同方向扩展边框，如下所示：

<h1>

h1.fromRight:after {
  transform-origin: 100% 50%;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}

以上是如何在悬停时创建边框底部的动画扩展？的详细内容。更多信息请关注PHP中文网其他相关文章！