时间戳

首页 > 解决方案 > 无法在css动画中将文本保留在屏幕上

html - 无法在css动画中将文本保留在屏幕上

问题描述

基本上我使用基本的打字机动画来制作基于文本的决策游戏，我不知道如何将所有文本保留在屏幕上。文本以较大的数字一直延伸到屏幕，并且 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>

标签： htmlcssanimation

解决方案

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

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

如果删除transform规则，您可以将项目与top规则对齐。如果你想做动画，我建议你只使用变换。

您也可以忽略该border-right规则，因为我认为它是不必要的。也许你需要它来制作动画。

推荐阅读