Question

我想拉伸类型来填充div的整个区域，但是遇到了麻烦，因为CSS中的scale（）特性是一种限制（并且对div本身也做了一些奇怪的事情）

我知道可以将文本转换为svg并按照这种方式进行缩放，但我希望保持文本的正常显示，因为我已经制作了倒计时功能。

基本上我喜欢完全填充框的类型，即使字符在字符交替时类型的宽度改变，也会拉伸自己。

这可能吗？或者我最好使用像bodymovin这样的东西？

＆＃13;

var count = 505;

var counter = setInterval(timer, 10); //10 will  run it every 100th of a second

function timer() {
  if (count <= 0) {
    clearInterval(counter);
    return;
  }
  count--;
  document.getElementById("timer").innerHTML = count / 100;
}

＆＃13;

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#timercontainer {
  width: 750px;
  height: 500px;
  display: flex;
  align-items: center;
}

#timer {
  font-size: 250px;
  transform: scale(1, 2);
  display: flex;
  align-items: center;
  text-align: left;
}

＆＃13;

<div id="timercontainer">
  <div id="timer"></div>
</div>

＆＃13;

Answer 1

为什么SVG被排除在外？ SVG也可以直播。

var count = 505;

var counter = setInterval(timer, 10); //10 will  run it every 100th of a second

function timer() {
  if (count <= 0) {
    clearInterval(counter);
    return;
  }
  count--;
  document.getElementById("timer").textContent = count / 100;
}

#timercontainer {
  width: 750px;
  height: 500px;
}

svg { background-color: yellow; }

<div id="timercontainer">
  <svg width="100%" height="100%" viewBox="-1 6 36 15" preserveAspectRatio="none">
    <text id="timer" x="0" y="20" font-size="20"></text>
  </svg>
</div>

如何伸展活体类型

1 个答案: