CSS字体大小缩放抖动

Question

我正在尝试缩放字体大小以在悬停时创建鱼眼镜头效果。

使用 CSS 通过过渡增加字体大小会导致抖动效果。

使用变换比例会产生不良效果，即文本的左侧在放大之前稍微向左移动。

我创建了一支笔来并排说明这两种效果。理想情况下，我想要左边的效果和右边的平滑度

https://codepen.io/sygad1/pen/QMWqXy

有什么想法可以实现吗？

干杯

HTML

  <ul class="fish-eye-text-size">
    <li>Font size scaling</li>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
    <li>Menu item four</li>
    <li>Menu item five</li>
    <li>Menu item six</li>
    <li>Menu item seven</li>
    <li>Menu item eight</li>
    <li>Menu item nine</li>
    <li>Menu item ten</li>
  </ul>

  <ul class="fish-eye-scaling">
    <li>CSS scaling</li>
    <li>Menu item one</li>
    <li>Menu item two</li>
    <li>Menu item three</li>
    <li>Menu item four</li>
    <li>Menu item five</li>
    <li>Menu item six</li>
    <li>Menu item seven</li>
    <li>Menu item eight</li>
    <li>Menu item nine</li>
    <li>Menu item ten</li>
  </ul>

SCSS

//Text size
.mediumText {
  font-size:1.4rem;
}
.largeText {
  font-size:1.7rem;
}



// CSS Scaling
.mediumScale {
  transform: scale(1.3);
  transform-origin: 0% 50%;
}
.largeScale {
  transform: scale(1.5);
  transform-origin: 0% 50%;
}




ul {
  margin:0 auto;
  padding:0;
  list-style:none;
  width:250px;
  overflow:hidden;
  float:left;
  margin:20px;
  background:#e1e1e1;

  li {
    cursor: pointer;
    transition:all 0.4s;
    height:30px;
    position:relative;
    padding:10px;
    will-change: transform;
  } 

}

JS

// Font size
$(".fish-eye-text-size li").on("mouseenter", function() {
  $(this).addClass("largeText");
  $(this).next().addClass("mediumText");
  $(this).prev().addClass("mediumText");
});

$(".fish-eye-text-size li").on("mouseleave", function() {
  $(this).removeClass("largeText");
  $(this).next().removeClass("mediumText");
  $(this).prev().removeClass("mediumText");
});

// CSS Scaling
$(".fish-eye-scaling li").on("mouseenter", function() {
  $(this).addClass("largeScale");
  $(this).next().addClass("mediumScale");
  $(this).prev().addClass("mediumScale");
});

$(".fish-eye-scaling li").on("mouseleave", function() {
  $(this).removeClass("largeScale");
  $(this).next().removeClass("mediumScale");
  $(this).prev().removeClass("mediumScale");
});

Answer 1

在您的第二个示例中，变换原点在悬停时从默认 50% 50% 隐式更改为 0% 50%，因此会出现抖动。您应该设置 transform-origin: 10px 50%; (10px 而不是 0 因为我们的目标是固定第一个字母的位置，而不是填充外边缘，所以我们将变换原点设置为内边缘填充区域)to the default state of li并将其从 .mediumScale/.largeScale 类中移除。