Question

基本上，我使用基本的打字机动画制作基于文本的决策游戏，我不知道如何将所有文本保留在屏幕上。文本以较大的数字和ID一直贯穿屏幕，就像块一样保留在其中，因此可以将其视为一种“转换对话框”。

为解决这个问题所做的所有工作都是由一些CSS编号支付的，没有任何作用

@import url(https://fonts.googleapis.com/css?family=VT323&display=swap);

/* Global */

html {
  min-height: 100%;
  overflow: hidden;
}

body {
  font-family: 'VT323', monospace;
}

.line-1 {
  position: relative;
  top: 50%;
  width: 24em;
  margin: 0 auto;
  border-right: 2px solid rgba(255, 255, 255, .75);
  font-size: 500%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transform: translateY(-50%);
}

.anim-typewriter {
  animation: typewriter 2.10s steps(35) 1s 1 normal both, blinkTextCursor 500ms steps(25) infinite normal;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 60em;
  }
}

@keyframes blinkTextCursor {
  from {
    border-right-color: rgba(255, 255, 255, .75);
  }
  to {
    border-right-color: transparent;
  }
}

<p class="line-1 anim-typewriter"> Hi my name is jack strope, and i will be assiting you today. First, we will be introducing the most important concept in the game. So answer this.... What is the best fruit snack?</p>

Answer 1

您有两个规则来对齐类.line-1的垂直位置

top: 50%;
transform: translateY(-50%);

如果删除transform规则，则可以使项目与top规则对齐。我建议您仅在要制作动画时才使用变换。

您也可以省略border-right规则，因为我认为这是不必要的。也许动画需要它。

无法在CSS动画中将文本保留在屏幕上

1 个答案: