CSS 变换scalex线高度不一致

Question

我在 link 上有悬停动画。文本下方绘制了一条线。它的高度为 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

您提到当您的浏览器大小为 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>

Answer 2

我也能够重现您的问题。正如上面提到的 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 使用一个小的不同值。

CSS 变换scalex线高度不一致

CSS transform scalex line unconsistant height

css

scale

css-transitions

css-transforms