如何使用 CSS 创建从左到右的动画下划线并在悬停时反转它？

动画下划线：从左到右

复制 uber.design 的过渡效果的挑战在于反转悬停时的过渡。虽然提供的 CSS 可以从左到右对下划线进行动画处理，但它缺乏反转动画的能力。

为了达到所需的效果，我们可以利用渐变和背景定位的组合。通过对元素应用线性渐变并延迟调整背景位置，我们可以创建下划线从左向右扩展的错觉。

这是修改后的 CSS：

.un {
  display: inline-block;
  padding-bottom:2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%; /*OR bottom left*/
  background-size: 0% 2px;
  background-repeat: no-repeat;
  transition:
    background-size 0.3s,
    background-position 0s 0.3s; /*change after the size immediately*/
}

.un:hover {
  background-position: 100% 100%; /*OR bottom right*/
  background-size: 100% 2px;
}

此代码在元素上创建线性渐变，最初位于左下角（0% 100%）。悬停时，背景位置更改为右下角（100% 100%），导致渐变扩大元素的宽度，从而产生下划线从左向右移动的效果。

要罚款-调整动画，调整背景大小和过渡持续时间的值以适应您想要的效果。

以上是如何使用 CSS 创建从左到右的动画下划线并在悬停时反转它？的详细内容。更多信息请关注PHP中文网其他相关文章！