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

Question

在这个模拟打字机的动画中（仅 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>

Answer 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) 现在，您有一个持续时间范围，因此通过在动画代码的第二行中在该范围内添加和减去一个固定值，根据您的元素对其进行动画处理...

对于前者，您使用 [+10% 和 -10%] 表示 [0%、50%、100%]，例如 - 0 & 40 和 60 & 90 ... 同样，我使用 [ +5% 和 -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) 运行上面的代码片段...您想要的输出已实现...

Answer 2

详细步骤 2

用法 - 要加减的%的值定义了光标改变单词的时间

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

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

ii) 现在在该范围内加减一个固定值，就像我在下限上加 5%，在上限上减 5%，ex- (0+5)%, ( 25-5)%在@keyframes的下一行.text_1

ex-

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

~步骤 (ii) 的含义 - 该词的动画将在总时间的 5% - 20% 范围内发生......为了动画的流畅运行，需要这种加法和减法。 ..

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

.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>

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

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

希望您的疑问得到解决...
此致，
欧姆·乔杜里

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

Add multiple variable words and center the text

html

css

animation

keyframe

css-animations