Question

我的css文档中有一个链接（“ a”标签），并且我有一个动画，该动画将底部边框从中心缩放到链接的两端。我希望动画从左侧缩放并向右拉伸

我尝试对它使用否定到肯定的翻译，但这看起来并不像我想要的那样。我似乎在这里或任何其他网站上找不到任何好的文章。

a:link:after
{
    content: "";
    display: block;
    border-bottom: 2px solid white;
    transform: scaleX(0);
    transition: transform .2s ease-out;
}
a:hover:after
{
    transform: scaleX(1);
}

从负到正的平移不会隐藏尚未动画化的边框部分，因此链接的左侧只有一个随机边框。

Answer 1

您可以将translate属性与scale结合使用。

a {
  font-size: 24px;
  text-decoration: none;
  position: relative;
  color: black;
  overflow: hidden;
  display: inline-block;
}

a:after {
  content: "";
  background: black;
  height: 2px;
  transform: translate3d(-100%, 0, 0) scale(0);
  transition: transform .2s ease-out;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

a:hover:after {
  transform: translate3d(0, 0, 0) scale(1);
}

<a href="">LINK</a>

将动画比例链接到右侧

1 个答案: