在css中缩放后文本变得模糊

Question

我正在使用缩放变换来缩放html中的div但是内部的文字变得模糊。有什么办法可以让文字清晰原文

@keyframes scaleText {
  from {
    transform: scale(0.5, 0.5);
  }
  to {
    transform: scale(2, 2);
  }
}

#para1Six {
  color: black;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  font-size: 19px;
  font-family: 'Sacramento', cursive;
  z-index: 2;
}
#wrapper 
{
  width: 500px;
  margin: 0 auto;
  animation-name: scaleText;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

<div id="wrapper">
  <div class="envelope open">
    <div class="flap front"></div>
    <div class="flap top"></div>
    <div class="letter">
      <p id="para1Six">
        Hello World
      </p>
    </div>
  </div>

Answer 1

您可以无需缩放即可演绎您的文字。

将font-size用于文本，将transform:scale()用于div。