CSS变换scalex线高度不一致

Question

我在链接上有一个悬停动画。在文本下方绘制一条线。它的高度为 2px。问题是它从一个高度开始并以另一个高度继续。

• 为什么要这样做？它不需要计算任何东西，因为 2px 是一个固定的数字。
• 我怎样才能绕过它？

动画 GIF 是在 Chrome 中拍摄的。

:root {
  --cp-500: #c53e3a;
  --cp-700: #8d1d2d;
  --cp-800: #721228;
}

.action a {
  background: linear-gradient(45deg, var(--cp-500), var(--cp-800));
  color: #fff;
  border-radius: 100vh;
  padding: .5rem 2rem;
  display: inline-block;
  border: 1px solid var(--cp-700);
  transition: box-shadow 150ms ease-in;
  box-shadow: 0 1.25rem 1rem -1rem var(--cp-800);
  z-index: 1;
  text-decoration: none;
  position: relative;
 }

.action a:hover {
  box-shadow: 0 1rem 1rem -1rem var(--cp-800);
  background: var(--cp-700);
}

.action a:before {
  content: '';
  position: absolute;
  bottom: .5rem;
  left: 2rem;
  width: calc(100% - 4rem);
  height: 2px;
  background: var(--cp-500);
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 1000ms ease-in;
  z-index: -1;
}

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1);
}

<div class="action">
   <a href="#">Test</a>
 </div>

Answer 1

我还能够重现您的问题。正如上面提到的 AlexioVay，您还应该添加一个 scaleY。但这还不够，您应该将 scaleY 设置为与 scaleX 几乎相同。现在这条线从开始到结束的高度相同。见此代码：https://jsfiddle.net/q236tmuk/30/

我在您的 css 中添加了以下更改：

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1) scaleY(0.99);
}

以下场景也可以正常工作：

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1) scaleY(1.01);
}

悬停时，行高从开始到结束都是相同的。不要对 scaleX 和 scaleY 使用相同的值，因为这样高度会在变换事件之后发生变化。是浏览器问题。唯一的解决方案是对 scaleY 使用一个小的不同值。

Answer 2

您提到当您的浏览器大小为125% 时会发生此行为。我也可以重现这种行为并进行了很多测试，包括height 和max-height 等属性，它们没有任何影响。

似乎scaleX 是主要问题，因为您使用了更大的浏览器尺寸，所以这种行为仅在此特定浏览器尺寸（或大于 125% 的浏览器尺寸）中可见。所以它也可能在 100% 时表现得像这样，但由于 2px 太小而无法用人眼看到它是我的猜测。

因此，我还在.action a:hover:before 上将scaleY(1.2) 添加到transform:，以防止这种紧张行为。

:root {
  --cp-500: #c53e3a;
  --cp-700: #8d1d2d;
  --cp-800: #721228;
}

.action a {
  background: linear-gradient(45deg, var(--cp-500), var(--cp-800));
  color: #fff;
  border-radius: 100vh;
  padding: .5rem 2rem;
  display: inline-block;
  border: 1px solid var(--cp-700);
  transition: box-shadow 150ms ease-in;
  box-shadow: 0 1.25rem 1rem -1rem var(--cp-800);
  z-index: 1;
  text-decoration: none;
  position: relative;
 }

.action a:hover {
  box-shadow: 0 1rem 1rem -1rem var(--cp-800);
  background: var(--cp-700);
}

.action a:before {
  content: '';
  position: absolute;
  bottom: .5rem;
  left: 2rem;
  width: calc(100% - 4rem);
  height: 2px;
  background: var(--cp-500);
  transform: scaleX(0);
  transform-origin: top right;
  transition: transform 1000ms ease-in;
  z-index: -1;
}

.action a:hover:before {
  transform-origin: top left;
  transform: scaleX(1) scaleY(1.2);
}

<div class="action">
   <a href="#">Test</a>
 </div>