动画下划线：从左到右
复制 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中文网其他相关文章！
