增加多个变量词，并将文字居中

问题描述 投票：2回答：1

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

第二个问题是，我不能准确地把 "Hi，i'm a "放在中间，让它在要写变量字的时候向左移动。(例如 https:/codepen.iosheikh_ishaanpenLYEOqjd。)

.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>
html css animation css-animations keyframe
1个回答
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）将你的动画的持续时间以相等的百分比除以你需要的字数。

例如--你首先需要两个字，所以你做了。0%, 50%, 100%，那么你需要4个字，所以输入 0%, 25%, 50%, 75%, 100%就像我在代码中做的那样。

2) 现在，你有一个持续时间的范围，所以根据你的元素，在你的动画代码的第二行，在这个范围内加减一个固定的值来制作动画......。

例如，你用了 [+10%和-10%] 为[0%, 50%, 100%], like- 0 & 40 和 60 & 90......同样，我用了 [+5%和-5%] for [0%, 25%, 50%, 75%, 100%], like- 5 & 20 and 30 & 45 and 55 & 70 and 80 & 95 (所有值都是百分比).

3）然后给你的标签定义类，其中包含文字，并将其包含在常用的CSS样式中，并分别给它们添加动画，为每一个标签定义一个独特的动画，比如--。

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

4) 运行上面的片段... 您所期望的输出已经实现...

0
投票

第2步详细介绍

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

(i) 就像你用你需要的单词数来划分你的持续时间，比如说4个单词，那么你必须为每个班级分配一个范围，就像我分配了 0%-25% 到 .text-1.

~步骤（一）的意思是--你是在指定那个特定单词的动画时间限制。

ii) 现在在这个范围内加减一个固定的值，比如我在下限上加5%，在上限上减5%，比如--------。(0+5)%, (25-5)% 在@关键帧的下一行 .text_1

前任 

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

~步骤(二)的含义--你的该词的动画将在总时间的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，但我个人更喜欢8个字的动画40s......

如果还有什么疑问，请告诉我。

希望你的疑问得到解决...... 问候，Om Chaudhary

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.