Question

我不明白为什么在下面的代码中，链接悬停效果从中间开始，而不是从左到右。有人可以解释为什么会这样吗？

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: orange;
  bottom: 0;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

.orange-link:hover:before,
.orange-link:focus:before {
  transform: scaleX(1);
}

<p>Visit the official rules <a class="orange-link" href="#">here</a> on how to send in a write-in entry.</p>

Answer 1

这是因为CSS转换的默认来源是元素的中心。

“默认情况下，它位于元素的中心并可以移动。它被需要特定点作为参数的多种变换（例如旋转，缩放或倾斜）使用。” — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

该线跨越了整个宽度，但是缩放为0（从中心开始）。然后，在悬停时，线会按比例缩放回原来的完整宽度。

Answer 2

您需要将transform-origin: top left;添加到.orange-link：before

Fiddle

除非您指定转换原点，否则它将默认为中心。

Answer 3

之所以发生，是因为您正在缩放元素。它从中间缩放，因为原点位于中间（默认情况下）。
如seen here

默认情况下，变换的原点是“ 50％50％”，恰好在任何给定元素的中心。

可能的解决方法是使用宽度

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0 !important;
  background: orange;
  bottom: 0;
  width: 0%;
  border-radius: 5px;
  transition: 0.25s linear;
}

.orange-link:hover::before,
.orange-link:focus::before {
  width: 100%;
}

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0 !important;
  background: orange;
  bottom: 0;
  width: 0%;
  border-radius: 5px;
  transition: 0.25s linear;
}

.orange-link:hover::before,
.orange-link:focus::before {
  width: 100%;
}

<p class="read-or-listen-to-excerpt">
  Visit the official rules <a class="orange-link" href="#">here</a> on how to send in a write-in entry.
</p>

或者您甚至可以将原点移动transform-origin: bottom left;并进行

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: orange;
  bottom: 0;
  transform-origin: bottom left;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

.orange-link:hover:before,
.orange-link:focus:before {
  transform: scaleX(1);
}

<p class="read-or-listen-to-excerpt">
  Visit the official rules <a class="orange-link" href="#">here</a> on how to send in a write-in entry.
</p>

Answer 4

您需要更改transform-origin，使其从左侧开始：

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: orange;
  bottom: 0;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
    transform-origin:left bottom;
}

.orange-link:hover:before,
.orange-link:focus:before {
  transform: scaleX(1);
}

<p class="read-or-listen-to-excerpt">
  Visit the official rules <a class="orange-link" href="#">here</a> on how to send in a write-in entry.
</p>

为什么此链接悬停效果从中间开始而不是从左边开始？

4 个答案: