增加多个变量词，并将文字居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了增加多个变量词，并将文字居中相关的知识，希望对你有一定的参考价值。
在这个动画中，我模拟了打字机（只有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"> Graphic Designer</span><span class="text_2"> Photographer</span></h1>
</div>答案
.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"> Graphic Designer</span>
<span class="text_2"> Photographer</span>
<span class="text_3"> Web developer</span>
<span class="text_4"> Artist</span>
</h1>
</div>另一答案
第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"> Graphic Designer</span>
<span class="text_2"> Photographer</span>
<span class="text_3"> Web developer</span>
<span class="text_4"> Artist</span>
<span class="text_5"> Word 5</span>
<span class="text_6"> Word 6</span>
<span class="text_7"> Word 7</span>
<span class="text_8"> Word 8</span>
</h1>
</div>以上是关于增加多个变量词，并将文字居中的主要内容，如果未能解决你的问题，请参考以下文章