添加多个可变词并使文本居中答案

【问题标题】：Add multiple variable words and center the text添加多个可变词并使文本居中
【发布时间】：2020-10-03 04:23:51
【问题描述】：

在我模拟打字机（仅 html/css）的动画中，我想再添加 4 个变量文字，但我不能，因为我不明白如何使用关键帧。我试过了，但他同时写了几个字。

第二个问题是我不能准确地将“Hi, i'm a”放在中间，并在它必须写变量字时让它向左移动。（例如：https://codepen.io/sheikh_ishaan/pen/LYEOqjd）

.box_type{
  margin-left: auto;
  margin-right: auto;
  width: 30em;
}

h1.type {
  font-size: 30px;
  display:flex;
  align-items: baseline;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_1, .text_2 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after, .text_2::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(5, end);
}

@keyframes text2 {
  0%, 50%, 100% {
    width: 0;
  }
  
  60%, 90% {
    width: 6.50em;
  }
}

@keyframes text1 {
  0%, 50%, 100% {
    width: 0;
  }
  10%, 40% {
    width: 8em;
  }
}

@keyframes caret {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

<div class="box_type">
  <h1 class="type">Hi, i'm a <span class="text_1">&nbsp;Graphic Designer</span><span class="text_2">&nbsp;Photographer</span></h1>
</div>

【问题讨论】：

添加到h1.type justify-content: center;
@GrzegorzT。哦，我是愚蠢的！非常感谢
@GrzegorzT。你知道如何添加更多可变词吗？
请参考我的第二个回答

标签： html css animation css-animations keyframe

【解决方案1】：

.box_type{
  margin-left: auto;
  margin-right: auto;
  width: 30em;
}

h1.type {
  font-size: 30px;
  display:flex;
  align-items: baseline;
  justify-content: center;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_3 {
  animation: text3;
}

.text_4 {
  animation: text4;
}

.text_1, .text_2, .text_3, .text_4 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after, .text_2::after, .text_3::after, .text_4::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(5, end);
}

@keyframes text1 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  5%, 20% {
    width: 8em;
  }
}

@keyframes text2 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  30%, 45% {
    width: 6.5em;
  }
}

@keyframes text3 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  
  55%, 70% {
    width: 6.75em;
  }
}

@keyframes text4 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  80%, 95% {
    width: 3em;
  }
}

@keyframes caret {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

<div class="box_type">
  <h1 class="type">Hi, i'm a 
  <span class="text_1">&nbsp;Graphic Designer</span>
  <span class="text_2">&nbsp;Photographer</span>
  <span class="text_3">&nbsp;Web developer</span>
  <span class="text_4">&nbsp;Artist</span>
  </h1>
</div>

以上是您的问题的答案，即如何添加更多此类单词...

嗯，我真的不擅长解释事情，但希望你能理解下面的解释代码......如果你遇到任何困惑，请在评论框中输入它并在你到达时浏览我的 CSS 代码新的解释步骤... 解释-

1) 将动画的持续时间除以所需的单词数，以等百分比计算，

for ex- 你首先需要两个词，所以你做了 0%, 50%, 100%，然后你需要 4 个词，所以输入 0%, 25%, 50% , 75%, 100%，就像我在我的代码中所做的那样。

2) 现在，您有了一个持续时间范围，因此可以通过在动画代码的第二行中添加和减去该范围内的固定值来根据您的元素对其进行动画处理...

对于 ex- 您使用 [ +10% 和 -10% ] 表示 [0%, 50%, 100%]，例如 - 0 & 40 和 60 & 90... 同样，我使用 [ +5% and -5% ] 表示 [0%, 25%, 50%, 75%, 100%]，例如 - 5 & 20 和 30 & 45 和 55 & 70 和 80 和 95（所有值均以百分比表示）。

3) 然后为您的标签定义包含单词的类，并将它们包含在常见的 CSS 样式中，并通过为每个标签定义一个独特的动画来分别为它们添加动画，例如 -

.text_1 { animation: text1;}  
.text_2 { animation: text2;}  
.text_3 { animation: text3;}  
.text_4 { animation: text4;}

4) 运行上面的sn-p...达到你想要的输出...

【讨论】：

请告诉我你是否得到它
您好，非常感谢您的回复和详细解释。我唯一不太了解的是百分比的加减法。例如，如果我必须用 8 个元素来做？
如果你要处理八个元素，那么你将指定 [0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100%]。所以我个人更喜欢你用 (2.5%) 来做加减...
我正在为此提供另一个答案...请稍候
我尝试了 2.5% 但它不起作用。我做错什么了吗？ codepen.io/chado/pen/OJMXNQV

【解决方案2】：

第二步详解

用法 - 要添加和减去的 % 值定义光标更改单词的时间

(i) 就像您将持续时间除以数字一样。你需要的单词，说 4 个单词，然后你必须为每个类分配一个范围，就像我将 0%-25% 分配给 .text-1 一样。

~步骤 (i) 的含义 - 您正在指定该特定单词动画的时间限制。

ii) 现在在该范围内添加和减去一个固定值，例如我将 5% 添加到下限并从上限减去 5%，例如 - (0+5)%, (25-5) % 在@keyframes 的下一行 .text_1

前-

@keyframes text1 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }
  5%, 20% {
    width: 8em;
  }
}

~步骤 (ii) 的含义 - 该单词的动画将在总时间的 5% - 20% 范围内进行...此加法和减法是动画顺利运行所必需的...

(iii) 同样，在为每个类指定一个分配的持续时间范围后，对每个类执行相同的操作。

以 .text_3 为例，它需要 50% - 75%，因此其平稳运行的极限是 - (50+5)% - (75 -5)% = 55% - 70% -

@keyframes text3 {
  0%, 25%, 50%, 75%, 100% {
    width: 0;
  }

  55%, 70% {
    width: 6.75em;
  }
}

现在，最后是 8 个元素的代码... 希望你现在能更好地理解它！

.box_type{
  margin-left: auto;
  margin-right: auto;
  width: 30em;
}

h1.type {
  font-size: 30px;
  display:flex;
  align-items: baseline;
  justify-content: center;
}

.text_1 {
  animation: text1;
}

.text_2 {
  animation: text2;
}

.text_3 {
  animation: text3;
}

.text_4 {
  animation: text4;
}

.text_5 {
  animation: text5;
}

.text_6 {
  animation: text6;
}

.text_7 {
  animation: text7;
}

.text_8 {
  animation: text8;
}

.text_1, .text_2, .text_3, .text_4, 
.text_5, .text_6, .text_7, .text_8 {
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  position: relative;
  animation-duration: 20s;
  animation-timing-function: steps(25, end);
  animation-iteration-count: infinite;
}

.text_1::after, .text_2::after, .text_3::after, .text_4::after, 
.text_5::after, .text_6::after, .text_7::after, .text_8::after {
  content: "|";
  position: absolute;
  right: 0;
  animation: caret infinite;
  animation-duration: 1s;
  animation-timing-function: steps(5, end);
}

@keyframes text1 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  2.5%, 10% {
    width: 8em;
  }
}

@keyframes text2 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  15%, 22.5% {
    width: 6.5em;
  }
}

@keyframes text3 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  
  27.5%, 35% {
    width: 6.75em;
  }
}

@keyframes text4 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  40%, 47.5% {
    width: 3em;
  }
}

@keyframes text5 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  52.5%, 60% {
    width: 4em;
  }
}

@keyframes text6 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  65%, 72.5% {
    width: 4em;
  }
}

@keyframes text7 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  77.5%, 85% {
    width: 4em;
  }
}

@keyframes text8 {
  0%, 12.5%, 25%, 37.5%, 50%, 62.5%, 75%, 87.5%, 100% {
    width: 0;
  }
  90%, 97.5% {
    width: 4em;
  }
}

@keyframes caret {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

<div class="box_type">
  <h1 class="type">Hi, i'm a 
  <span class="text_1">&nbsp;Graphic Designer</span>
  <span class="text_2">&nbsp;Photographer</span>
  <span class="text_3">&nbsp;Web developer</span>
  <span class="text_4">&nbsp;Artist</span>
  <span class="text_5">&nbsp;Word 5</span>
  <span class="text_6">&nbsp;Word 6</span>
  <span class="text_7">&nbsp;Word 7</span>
  <span class="text_8">&nbsp;Word 8</span>
  </h1>
</div>

如果你觉得动画很快，你可以简单地给你的动画增加更多的秒数，目前这个值是 20s 但我个人更喜欢 40s 八字动画...

如果还有任何疑问，请告诉我。

希望您的疑问得到解决...
问候，
奥姆乔杜里

【讨论】：

是的，您可以使用“n”个单词来制作动画。以上是 8 个，但您可以在 CSS 代码中使用相同的方法添加更多单词
你检查了吗？我的意思是加法和减法的值